sveltejs / sveltejs/kit

Feature: Preflight Client-Only Form Validation without Remote Function

Open
#15,136 1 comment 8 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

forms
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.