Feature: Preflight Client-Only Form Validation without Remote Function
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the existing $app/server form and preflight APIs referenced in the issue, then determine how the proposed $app/client entry point would fit without a remote function. A complete solution should validate and submit client-only forms to an external API, such as Firebase, without making a server call; the issue names no tests or implementation files.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100