svom
v0.0.2
Published
SvelteKit form validations for the server and client, using zod and zod-form-data
Downloads
3
Readme
svom
SvelteKit form validations for the server and client, using zod and zod-form-data
Getting Started
Install the package:
npm install svom
Usage
Server
// src/routes/register/+page.server.ts
import { z } from 'zod';
import { validate, zfd } from 'svom';
import type { Actions } from './$types';
import db from '$db';
const SignUpSchema = zfd.formData({
name: zfd.text(z.string().min(1)),
age: zfd.numeric(z.number().min(18)),
email: zfd.text(z.string().email()),
password: zfd.text(z.string().min(8))
});
export const actions = {
signUp: validate(SignUpSchema, async ({ data, fail }) => {
const { name, age, email, password } = data;
if (db.user.exists(email)) {
return fail({ email: 'Email already exists' });
}
// ... do something with the data
})
} satisfies Actions;
Client
<!-- src/routes/register/+page.svelte -->
<script lang="ts">
import { createForm } from 'svom';
import SubmitButton from '$lib/SubmitButton.svelte';
import Input from '$lib/Input.svelte';
// We're using a shared file for the schema, but you can also define it in this file for custom client validation
import { SignUpSchema } from './validation';
const { enhance } = createForm({
schema: SignUpSchema,
onSubmit: async (data, { form, action, result }) => {
console.log({ data, other });
}
});
</script>
<form action="?/signUp" method="post" use:enhance>
<Input name="email" type="email" />
<Input name="password" type="password" />
<SubmitButton />
</form>
<!-- src/lib/Input.svelte -->
<script lang="ts">
import { useField } from 'svom';
export let name: string;
export let type: string = 'text';
export let disabled: boolean = false;
export let initialValue: any = '';
const { error, isSubmitting, value } = useField(name, initialValue);
</script>
<input disabled={$isSubmitting || disabled} {type} value={$value} {name} id={name} />
{#if $error}
<p class="error">{$error}</p>
{/if}
<!-- src/lib/SubmitButton.svelte -->
<script lang="ts">
import { useForm } from '$lib';
const { isSubmitting } = useForm();
</script>
<button disabled={$isSubmitting} type="submit">Submit</button>
<style>
button:disabled {
opacity: 0.5;
}
</style>