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

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