Os formulários continuam sendo uma parte integrante de como os usuários interagem com a web. Ao lidar com formulários, temos que controlar a entrada do usuário, validar e exibir erros e lidar com o envio do formulário.
Neste artigo, aprenderemos como as associações de entrada funcionam no Svelte, como validar formulários com o Yup e como o svelte-forms-lib torna o gerenciamento de formulários mais fácil. Também construiremos um formulário de amostra e o validaremos com essas ferramentas para demonstrar as muitas opções que você tem ao construir e validar formulários no Svelte.
Compreendendo as ligações de entrada Svelte
Precisamos rastrear e armazenar o valor dos campos de entrada conforme o tipo de usuário. Svelte fornece duas diretivas para conseguir isso: on: input e bind .
on:input
Este ouvinte de evento é chamado sempre que ocorre um evento de entrada:
{email}
No código acima, definimos um handleInput e o passamos para o campo de entrada do e-mail. Sempre que o usuário digita, a variável email é atualizada com o valor do campo.
bind:value
A diretiva bind é uma maneira mais limpa de trabalhar com valores de formulário de rastreamento no Svelte:
Em vez de criar um evento handleInput e ter que definir event.target.value para cada campo de entrada em um determinado formulário, bind manipula isso para nós, e sempre que preenchermos a entrada, a variável email será atualizada.
Neste artigo, usaremos a diretiva bind para rastrear e armazenar valores de formulário, pois é uma maneira mais fácil de trabalhar.
Validação com Yup
Sim é um validador de esquema de objeto JavaScript. Sim, garante que os dados em um objeto estejam na forma e no formato que desejamos:
import * as yup from'yup'; deixe valores={ o email:"", senha:"", Confirme a Senha:"", passatempo:"", caixa de seleção: falso,
}; esquema const=yup.object (). forma ({ email: yup.string (). required ("Email is required") .email ("Email é inválido"), senha: yup.string (). required ("Senha obrigatória"), confirmPassword: yup.string (). required ("Por favor, confirme sua senha") .oneOf ([yup.ref ("password"), null],"As senhas não correspondem"), hobby: yup.string (). required ("Hobby é obrigatório"), checkbox: yup.bool (). required ("A caixa de seleção deve ser aceita") .oneOf ([true],"A caixa de seleção deve ser aceita"),
}); const validationResult=schema .validate (valores, {abortEarly: false}) .então (()=> { alerta (JSON.stringify (valores, nulo, 2)); }) .catch ((errar)=> { console.log (err.errors); }); //console.log mensagem //["Email é inválido","As senhas não correspondem","Hobby é obrigatório","Che//ckbox deve ser aceito"]
No schema , definimos como queremos que os dados de nossos valores de formulário sejam exibidos. Isso garante que os dados enviados ao servidor sejam válidos.
Nós validamos objetos no Yup usando seu método validate . Podemos chamar esse método em qualquer esquema que definirmos.
Criação de um formulário de perfil
Agora que entendemos como a vinculação de formulário funciona no Svelte e como o Yup valida os valores dos objetos, vamos configurar um formulário de perfil de amostra e validá-lo:
Formulário de Perfil
Começamos configurando um formulário de perfil simples para capturar os dados de um usuário. Vinculamos os campos do formulário a um objeto values . Este objeto é onde armazenaremos os dados do formulário.
Validando o formulário de perfil
Agora que criamos o formulário de perfil, precisamos validá-lo.
Ao contrário do que fizemos quando registramos os erros no console, queremos exibi-los para o usuário ver:
Neste bloco de código, criamos um objeto errors onde armazenaremos os erros que obteremos da chamada validate . Então, criamos uma função assíncrona, handleSubmit . Aqui, cuidaremos da validação e do envio do formulário.
Passamos os dados que queremos validar para este método. Nesse caso, estaremos validando os valores recebidos de um formulário.
Validate pode receber um segundo parâmetro, um objeto de opções. A validação retorna no primeiro erro por padrão. Para obter todos os erros retornados, devemos definir abortEarly como false .
Se não houver erros, exibimos os valores do formulário. Se houver, exibimos os erros. No entanto, antes que possamos exibir os erros, devemos acessá-los:
erros=err.inner.reduce ((acc, err)=> { return {... acc, [err.path]: err.message};
}, {});
Para acessar os erros, fazemos um loop na matriz error.inner de validação de Yup e retornamos um novo objeto que consiste em campos e suas mensagens de erro. Em seguida, atualizamos o objeto errors com os erros para cada campo de entrada correspondente.
Exibindo erros de validação
Agora que temos o objeto errors que contém o erro para cada campo de entrada, precisamos exibi-los:
{#if errors.email} {errors.email} {/E se}{#if errors.password} {errors.password} {/E se}{#if errors.confirmPassword} {errors.confirmPassword} {/E se}{#if errors.hobby} {errors.hobby} {/E se}{#if errors.checkbox} {errors.checkbox} {/E se}
Configuramos um bloco if para lidar com a exibição do erro. Se existir um erro para um determinado campo, exibimos o erro desse campo. Este link CodeSandbox contém o código para esta seção.
Validação com svelte-forms-lib
Svelte forms lib é uma biblioteca inspirada em Formik para construir formulários facilmente em um projeto Svelte.
Você pode instalar o svelte-forms-lib com o seguinte:
npm i svelte-forms-lib
Primeiro, importamos a função createForm de svelte-forms-lib :
import {createForm} de"svelte-forms-lib";
Esta função é a parte central da integração do svelte-forms-lib em um formulário.
CreateForm nos dá acesso a formulários úteis como handleChange e handleSubmit , entre outros. Precisaremos dessas funções auxiliares para configurar o formulário:
Formulário de inscrição
Além das funções auxiliares, svelte-forms-lib expõe valores observáveis que nos fornecem informações sobre o estado atual do formulário. Neste artigo, vamos nos concentrar em trabalhar com os observáveis formulário e erros . No entanto, você pode verificar a lista completa de observáveis disponíveis aqui.
Passamos um objeto de configuração como um argumento para createForm . Aqui, definimos os initialValues do formulário e um manipulador onSubmit que tratará do envio do formulário.
Tendo configurado createForm , precisamos conectar o formulário de perfil até svelte-forms-lib , para que ele possa rastrear os valores do formulário e lidar com o envio.
Para fazer isso, passamos o auxiliar handleSubmit para o elemento form . Também passamos handleChange para os campos de entrada e vinculamos seus valores ao formulário observável.
Validação personalizada em svelte-forms-lib
Agora que sabemos como integrar svelte-forms-lib em um formulário, precisamos lidar com a validação do formulário:
Formulário de inscrição
Além de configurar createForm com um objeto initialValues e uma função onSubmit , também podemos adicionar uma função validate retorno de chamada para lidar com a validação do formulário.
Aqui, verificamos o estado de cada campo de entrada e, com base nesse estado, atualizamos o objeto erros . Sempre que houver erros em qualquer campo de entrada, nós os exibimos em um bloco if .
Sim validação em svelte-forms-lib
Embora possamos criar uma validação personalizada para nosso formulário, também temos a opção de passar essa responsabilidade para o Yup.
Trabalharemos com o mesmo objeto de validação schema que acabamos de criar:
//formulário de perfil abaixo
Svelte-forms-lib fornece suporte com validação Yup por meio de um prop validationSchema que aceita um objeto de esquema. Passamos no esquema que definimos. Você pode encontrar o link CodeSandbox para esta seção aqui .
Componentes de formulário personalizados em svelte-forms-lib
Até agora, tivemos que passar handleSubmit para o formulário, vincular cada campo a seus respectivos valores e passar handleChange para cada campo.
Enquanto isso dá conta do recado, svelte-forms-lib oferece uma maneira melhor e menos repetitiva de trabalhar com formulários: componentes personalizados.
Esses componentes reduzirão o padrão e tornarão o código do formulário muito conciso:
//formulário de perfil abaixoFormulário de inscrição
Aqui, usamos , e componentes.
Passamos initialValues , onSubmit e validationSchema para por meio do a variável formProps que definimos. O nome e o tipo são necessários para
Para exibirá o erro. Não precisamos mais processar o erro condicionalmente.
Você pode encontrar o link CodeSandbox para esta seção aqui.
Conclusão
Criar formulários no Svelte pode ser simples e muito complicado. Neste artigo, aprendemos como rastrear e armazenar valores de entrada no Svelte, lidar com a validação com Yup, como funciona o svelte-forms-lib e as diferentes maneiras de integrar essa biblioteca incrível em nossos formulários.
A postagem Validando formulários em Svelte apareceu primeiro em LogRocket Blog .
