https://github.com/probablykasper/niceform
Convenient form validation and typing for SvelteKit
https://github.com/probablykasper/niceform
Last synced: 12 months ago
JSON representation
Convenient form validation and typing for SvelteKit
- Host: GitHub
- URL: https://github.com/probablykasper/niceform
- Owner: probablykasper
- Created: 2025-02-01T07:37:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-02T13:01:00.000Z (over 1 year ago)
- Last Synced: 2025-04-19T21:44:40.456Z (about 1 year ago)
- Language: TypeScript
- Size: 26.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# niceform
Convenient form validation and typing for SvelteKit. Based on Superforms and Zod.
Might turn this into an actual package later
Features
- `name` attribute typing
- Multiple forms
- i18n
- Snapshots
### Example `+page.server.ts`
```ts
import { z } from 'zod'
import { nice_form } from '$lib/niceform'
const schema = z.object({
name: z.string(),
})
export const actions = {
async default(event) {
const form = await nice_form.zod(schema, event)
if (!form.valid) {
return form.fail(400)
}
if (form.data.name === 'Hi') {
return form.set_error('name', 'You are a failure')
}
return {
success: true,
}
},
}
```
### Example Input wrapper component
Includes type-safe `name` attribute, automatic error messages and label with automatic ID
```svelte
import { sequential_num, type AddFormProps, type PartialNiceForm } from './niceform'
import type { HTMLInputAttributes } from 'svelte/elements'
let {
form,
label,
value = $bindable(),
...props
}: AddFormProps<HTMLInputAttributes, F> = $props()
let errors = $derived(form?.errors ?? {})
const id = 'input-' + sequential_num()
{#if label}
{label}
{/if}
{#if props.name && errors[props.name]}
{errors[props.name]}
{/if}
```
### i18n example
```ts
import { z } from 'zod'
import * as m from '$lib/paraglide/messages'
import { set_error_map } from './niceform'
export const form_errors = set_error_map({
invalid_email: m.invalid_email,
})
export const email_schema = z.string().email(form_errors.invalid_email).max(100)
```
### Snapshots
Might change this API
```ts
import { enhance } from '$app/forms'
import { auto_snapshot } from '$lib/niceform'
const snapshotter = auto_snapshot()
export const snapshot = auto_snapshot()
```