Feature: Preflight Client-Only Form Validation without Remote Function

[jdgamble555]

Describe the problem

We need a client only form validator. While this should be in Svelte and not Kit eventually, all the code is already there for SvelteKit to allow this.

A perfect obvious example is submitting a form to Firebase. Firebase does not need a server, as you can submit directly to their API using the Firebase SDK on the client (with Firestore Rules etc). Granted, you can't use progressive enhancements, but that is part of an external API with JS.

Describe the proposed solution

There really doesn't have to be much changes in the UI.

<script lang="ts">
    import { preflight } from '$app/client';
    import { profileSchema } from '$lib/profile-schema';

    const profileForm = preflight(profileSchema);
    
    type SubmitRemoteFunction = Parameters<typeof profileForm.enhance>[0];
    
    const onSubmit: SubmitRemoteFunction = async ({ data }) => {
        // submit to firebase or whatever external API
    	alert('Profile updated successfully with: ' + JSON.stringify(data));
    };
</script>

<form {...preflight(profileSchema).submit(onSubmit)}>

	<input
		{...profileForm.fields.name.as('text')}
		oninput={() => profileForm.validate()}
	/>
</form>

Alternatives considered

We can emulate this now:

// profile.remote.ts

import { form } from "$app/server";
import { profileSchema } from "./profile-schema";

export const profileForm = form(profileSchema, () => {});

with:

<form {...profileForm.preflight(profileSchema).enhance(onSubmit)}>

However, this requires a remote function to be set up, and will make a useless server call on any valid form.

Importance

would make my life easier

Additional Information

There has been a lot of discussion about this, but I did not see an actual issue raised for it.