Svelte Form Zod

🔒 Biblioteca para formulários com SvelteKit e Zod. 🔒

Sobre

Svelte Form Zod é uma biblioteca de formulários para SvelteKit que usa Zod para validação de dados.

Instalação

1npm install svelte-form-zod
2
3ou
4
5yarn add svelte-form-zod

Como usar

Criando um formulário

Para criar um formulário, você precisa criar um arquivo .svelte e importar a função createForm e o z do Zod.

1<script lang="ts">
2	import { createForm, z } from 'svelte-form-zod';
3
4	const schema = z.object({
5		name: z.string().min(3).max(50),
6		email: z.string().email(),
7		password: z.string().min(6).max(50),
8		phone: z.string(),
9		cnpj: z.string()
10	});
11
12	const initialValues = {
13		name: '',
14		email: '',
15		password: '',
16		phone: '',
17		cnpj: ''
18	};
19
20	const { form, errors } = createForm({
21		schema,
22		initialValues,
23		masked: {
24			phone: '(99) 9999-9999', // ou ['(99) 9999-9999','(99) 9 9999-9999']
25			cnpj: '99.999.999/9999-99'
26		},
27		onSubmit: (values) => {
28			const { name, email, password, phone, cnpj } = values;
29			console.log(name, email, password, phone, cnpj);
30		}
31	});
32</script>
33
34<form use:form>
35	<label>
36		<input type="text" name="name" />
37		{#if $errors.name}
38			<span>{$errors.name}</span>
39		{/if}
40	</label>
41	<label>
42		<input type="text" name="email" />
43		{#if $errors.email}
44			<span>{$errors.email}</span>
45		{/if}
46	</label>
47	<label>
48		<input type="password" name="password" />
49		{#if $errors.password}
50			<span>{$errors.password}</span>
51		{/if}
52	</label>
53
54	<label>
55		<input type="text" name="phone" />
56		{#if $errors.phone}
57			<span>{$errors.phone}</span>
58		{/if}
59	</label>
60
61	<label>
62		<input type="text" name="cnpj" />
63		{#if $errors.cnpj}
64			<span>{$errors.cnpj}</span>
65		{/if}
66	</label>
67
68	<button type="submit">Enviar</button>
69</form>

createForm

• schema - Esquema de validação do formulário
• initialValues - Objeto com os valores iniciais do formulário
• onSubmit - Função que será executada quando o formulário for submetido
• masked - Objeto com os campos que devem ser mascarados
• errors - Objeto com os erros de validação do formulário
• watch - Objeto com os valores dos campos do formulário
• form - Objeto use:form do formulário Svelte
• reset - Função que reseta o formulário para os valores iniciais
• updateField - Função que atualiza um campo específico do formulário
• updateFields - Função que atualiza vários campos do formulário
• setError - Função que define um erro de validação para um campo específico do formulário
• setErrors - Função que define vários erros de validação para o formulário
• resetError - Função que remove o erro de validação de um campo específico do formulário
• resetErrors - Função que remove todos os erros de validação do formulário
• getValue - Função que retorna o valor de um campo específico do formulário
• getValues - Função que retorna um objeto com os valores de todos os campos do formulário

Masked

1const { form } = createForm({
2	schema,
3	initialValues,
4	masked: {
5		phone: '(99) 9999-9999', // ou ['(99) 9999-9999','(99) 9 9999-9999']
6		uf: 'AA'
7	},
8	onSubmit
9});

errors

1const { form, errors, setError, setErrors, resetError, resetErrors } = createForm({
2    schema,
3    initialValues,
4    onSubmit
5})
6
7{#if $errors.name}
8    <span>{$errors.name}</span>
9{/if}
10
11setError('name', 'Nome inválido')
12setErrors({
13    name: 'Nome inválido',
14    email: 'Email inválido'
15})
16
17resetError('name')
18resetErrors()

watch

1const { form, watch } = createForm({
2    schema,
3    initialValues,
4    onSubmit
5})
6
7{#if $watch.name}
8    <span>{$watch.name}</span>
9{/if}
10
11
12<input type="text" bind:value={$watch.name} />
13<input type="text" bind:value={$watch.email} />
14

updateField

1const { form, updateField } = createForm({
2    schema,
3    initialValues,
4    onSubmit
5})
6
7updateField('name', 'Name')
8updateField('email', 'Email')
9
10ou
11
12<input type="text" on:input={e => updateField('name', e.target.value)} />
13<input type="text" on:input={e => updateField('email', e.target.value)} />
14

updateFields

1
2const { form, updateFields } = createForm({
3    schema,
4    initialValues,
5    onSubmit
6})
7
8updateFields({ name: 'Name', email: 'Email' })
9
10ou
11
12<input type="text" on:input={e => updateFields({ name: e.target.value })} />
13<input type="text" on:input={e => updateFields({ email: e.target.value })} />

getValue

1const { form, getValue } = createForm({
2	schema,
3	initialValues,
4	onSubmit
5});
6
7const name = getValue('name');
8const email = getValue('email');

getValues

1const { form, getValues } = createForm({
2	schema,
3	initialValues,
4	onSubmit
5});
6
7const { name, email } = getValues();

reset

1const { form, reset } = createForm({
2	schema,
3	initialValues,
4	onSubmit
5});
6
7reset();

Autor

@viniribeirodev