[Form] Client Side Only Functionality as in shadcn

[anatolzak]

I am having trouble implementing client side only forms with zod validation just as is shown in the shadcn form component. Basically all I want is client side validation and be able to call a function after successful validation without using anything that starts with the word server 😉

Here is my react code:

const Login = () => {
  const [isLoading, setIsLoading] = useState(false);

  const form = useForm<LoginSchema>({
    resolver: zodResolver(loginSchema),
    disabled: isLoading
  });

  async function onSubmit(data: LoginSchema) {
    setIsLoading(true)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name='email'
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder='Email...' type='email' {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name='password'
          render={({ field }) => (
            <FormItem>
              <FormLabel>Password</FormLabel>
              <FormControl>
                <Input placeholder='Password...' type='password' {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type='submit' disabled={isLoading}>
          {isLoading ? 'Logging in...' : 'Login'}
        </Button>
      </form>
    </Form>
  );
};

And here is my svelte code:

<script lang="ts">
	import { Form, FormButton, FormField, FormInput, FormItem, FormLabel, FormValidation } from '$lib/components/ui/form';
	import { superValidate } from 'sveltekit-superforms/client';
	import { formSchema } from './schema';

	const form = superForm(formSchema, { validators: formSchema });
</script>

<Form {form} schema={formSchema} let:config>
	<FormField {config} name="email">
		<FormItem>
			<FormLabel>Email</FormLabel>
			<FormInput placeholder="Email..." type="email" />
			<FormValidation />
		</FormItem>
	</FormField>
	<FormField {config} name="password">
		<FormItem>
			<FormLabel>Password</FormLabel>
			<FormInput placeholder="Password..." type="password" />
			<FormValidation />
		</FormItem>
	</FormField>
	<FormButton>Login</FormButton>
</Form>

But I get an error in my IDE with the following svelte code: superValidate returns a promise whose result should be passed to the Form component. Right now I am passing the promise to the form prop in the Form component.

I am not very familiar with superforms and formsnap yet so forgive me if I am missing something obvious. All I want to accomplish is client side forms as shown in shadcn as mentioned above.

Thanks in advance for your time!

[Destaq]

I managed to get this to work for SPA (client-side) by looking at the superform docs. Example:

+page.ts

import { error } from '@sveltejs/kit';
import { superValidate } from 'sveltekit-superforms';
import { zod } from 'sveltekit-superforms/adapters';
import { z } from 'zod';

export const _userSchema = z.object({
	id: z.number().int().positive(),
	name: z.string().min(2),
	email: z.string().email()
});

export const load = async ({ fetch }) => {
	const id = 5;

	const request = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
	if (request.status >= 400) throw error(request.status);

	const userData = await request.json();
	const form = await superValidate(userData, zod(_userSchema));

	return { form };
};

+page.svelte

<script lang="ts">
	import { superForm, setMessage, setError } from 'sveltekit-superforms';
	import { _userSchema } from './+page.js';
	import { zod } from 'sveltekit-superforms/adapters';
	import * as Form from '$lib/components/ui/form';
	import Input from '$lib/components/ui/input/input.svelte';

	export let data;

	const form = superForm(data.form, {
		SPA: true,
		validators: zod(_userSchema),
		onUpdate({ form }) {
			// Form validation
			if (form.data.email.includes('spam')) {
				setError(form, 'email', 'Suspicious email address.');
			} else if (form.valid) {
				// TODO: Call an external API with form.data, await the result and update form
				setMessage(form, 'Valid data!');
			}
		}
	});

	const { form: formData, enhance } = form;
</script>

<h1>Edit user</h1>

<!-- {#if $message}<h3>{$message}</h3>{/if} -->

<form method="POST" use:enhance>
	<!-- <label>
		Name<br />
		<input
			aria-invalid={$form.errors.name ? 'true' : undefined}
			bind:value={$form.name}
			{...$constraints.name}
		/>
	</label>
	{#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}

	<label>
		E-mail<br />
		<input
			type="email"
			aria-invalid={$errors.email ? 'true' : undefined}
			bind:value={$form.email}
			{...$constraints.email}
		/>
	</label>
	{#if $errors.email}<span class="invalid">{$errors.email}</span>{/if} -->

	<Form.Field {form} name="name">
		<Form.Control let:attrs>
			<Form.Label>Name</Form.Label>
			<Input {...attrs} bind:value={$formData.name} />
		</Form.Control>
		<Form.Description />
		<Form.FieldErrors />
	</Form.Field>

	<Form.Field {form} name="email">
		<Form.Control let:attrs>
			<Form.Label>Email</Form.Label>
			<Input {...attrs} bind:value={$formData.email} />
		</Form.Control>
		<Form.Description />
		<Form.FieldErrors />
	</Form.Field>

	<button>Submit</button>
</form>

[OssiPesonen]

The above is a copy of the Superforms example. I got rid of the page load here by providing defaults and this is my complete client side validation and form submission handler for user sign in. You can ignore the icons etc. I have here. I put my auth functionality in a store that handles login, storing tokens, refreshing them etc. as I use gRPC here.

The following component is imported in the +page.svelte in/users/sign-in path.

sign-in-form.svelte

<script lang="ts">
	import { goto } from '$app/navigation';
	import { Icon } from 'svelte-icons-pack';
	import { LuCircleAlert } from 'svelte-icons-pack/lu';
	import { zod, z } from 'sveltekit-superforms/adapters';
	import { superForm, defaults } from 'sveltekit-superforms';
	import * as Form from '$lib/components/ui/form';
	import * as Alert from '$lib/components/ui/alert';
	import { formSchema } from '../schema';
	import { login, authError } from '$lib/stores/auth';
	import { Input } from '$lib/components/ui/input/index.js';

        const formSchema = z.object({
	        email: z.string().email(),
	        password: z
		        .string()
		        .min(8, { message: 'Must be 8 or more characters long' })
		        .max(50, { message: 'Must be 50 characters or less' })
        });

	const form = superForm(defaults(zod(formSchema)), {
		SPA: true,
		validators: zod(formSchema),
		resetForm: false
	});

	const { form: formData, enhance, validateForm, errors } = form;

	async function handleSubmit(event: Event) {
		event.preventDefault();
		const result = await validateForm();

		if (!result.valid) {
			errors.update((v) => {
				return {
					...v,
					email: result.errors.email,
					password: result.errors.password
				};
			});

			return;
		}
		
		const success = await login($formData.email, $formData.password);
		
		// Only track success as error is already being subscribed to
		if(success) {
			return await goto('/')
		}
	}
</script>

<div class="grid gap-6">
	<form method="POST" use:enhance onsubmit={handleSubmit}>
		<Form.Field {form} name="email" class="mb-2">
			<Form.Control let:attrs>
				<Form.Label>Username</Form.Label>
				<Input {...attrs} bind:value={$formData.email} />
			</Form.Control>
			<Form.FieldErrors />
		</Form.Field>
		<Form.Field {form} name="password">
			<Form.Control let:attrs>
				<Form.Label>Password</Form.Label>
				<Input {...attrs} type="password" bind:value={$formData.password} />
			</Form.Control>
			<Form.FieldErrors />
		</Form.Field>
		<Form.Button class="w-full mt-2">Submit</Form.Button>
		{#if $authError === 'UNAUTHENTICATED'}
			<Alert.Root variant="destructive" class="mt-4">
				<Icon src={LuCircleAlert} className="h-4 w-4" />
				<Alert.Title>Error</Alert.Title>
				<Alert.Description>Invalid email or password. Please try again.</Alert.Description>
			</Alert.Root>
		{/if}
	</form>
</div>

Hope that helps! Took me a day to figure this out.

[huntabyte]

This is the answer @OssiPesonen 😃