Sobre

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

Instalação

npm install svelte-form-zod

ou

yarn 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.

<script lang="ts">
	import { createForm, z } from 'svelte-form-zod';

	const schema = z.object({
		name: z.string().min(3).max(50),
		email: z.string().email(),
		password: z.string().min(6).max(50),
		phone: z.string(),
		cnpj: z.string()
	});

	const initialValues = {
		name: '',
		email: '',
		password: '',
		phone: '',
		cnpj: ''
	};

	const { form, errors } = createForm({
		schema,
		initialValues,
		masked: {
			phone: '(99) 9999-9999', // ou ['(99) 9999-9999','(99) 9 9999-9999']
			cnpj: '99.999.999/9999-99'
		},
		onSubmit: (values) => {
			const { name, email, password, phone, cnpj } = values;
			console.log(name, email, password, phone, cnpj);
		}
	});
</script>

<form use:form>
	<label>
		<input type="text" name="name" />
		{#if $errors.name}
			<span>{$errors.name}</span>
		{/if}
	</label>
	<label>
		<input type="text" name="email" />
		{#if $errors.email}
			<span>{$errors.email}</span>
		{/if}
	</label>
	<label>
		<input type="password" name="password" />
		{#if $errors.password}
			<span>{$errors.password}</span>
		{/if}
	</label>

	<label>
		<input type="text" name="phone" />
		{#if $errors.phone}
			<span>{$errors.phone}</span>
		{/if}
	</label>

	<label>
		<input type="text" name="cnpj" />
		{#if $errors.cnpj}
			<span>{$errors.cnpj}</span>
		{/if}
	</label>

	<button type="submit">Enviar</button>
</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

const { form } = createForm({
	schema,
	initialValues,
	masked: {
		phone: '(99) 9999-9999', // ou ['(99) 9999-9999','(99) 9 9999-9999']
		uf: 'AA'
	},
	onSubmit
});

errors

const { form, errors, setError, setErrors, resetError, resetErrors } = createForm({
    schema,
    initialValues,
    onSubmit
})

{#if $errors.name}
    <span>{$errors.name}</span>
{/if}

setError('name', 'Nome inválido')
setErrors({
    name: 'Nome inválido',
    email: 'Email inválido'
})

resetError('name')
resetErrors()

watch

const { form, watch } = createForm({
    schema,
    initialValues,
    onSubmit
})

{#if $watch.name}
    <span>{$watch.name}</span>
{/if}


<input type="text" bind:value={$watch.name} />
<input type="text" bind:value={$watch.email} />

updateField

const { form, updateField } = createForm({
    schema,
    initialValues,
    onSubmit
})

updateField('name', 'Name')
updateField('email', 'Email')

ou

<input type="text" on:input={e => updateField('name', e.target.value)} />
<input type="text" on:input={e => updateField('email', e.target.value)} />

updateFields

const { form, updateFields } = createForm({
    schema,
    initialValues,
    onSubmit
})

updateFields({ name: 'Name', email: 'Email' })

ou

<input type="text" on:input={e => updateFields({ name: e.target.value })} />
<input type="text" on:input={e => updateFields({ email: e.target.value })} />

getValue

const { form, getValue } = createForm({
	schema,
	initialValues,
	onSubmit
});

const name = getValue('name');
const email = getValue('email');

getValues

const { form, getValues } = createForm({
	schema,
	initialValues,
	onSubmit
});

const { name, email } = getValues();

reset

const { form, reset } = createForm({
	schema,
	initialValues,
	onSubmit
});

reset();

Autor

| @viniribeirodev | | :----------------------------------------------------------------------------------------------------------------------------------------: |