Você já tentou enviar um formulário, apenas para a página da Web fornecer uma mensagem de erro informando que um ou mais campos são inválidos? Em caso afirmativo, você experimentou a validação de formulário.
A validação geralmente é essencial para obter dados limpos e utilizáveis. De endereços de e-mail a datas, se precisar ser preciso, verifique com cuidado.
O que é validação de formulário?
A validação do formulário é o processo de garantir que os dados inseridos em um formulário por um usuário estejam corretos e completos. Você pode fazer isso no lado do cliente, usando recursos HTML integrados, como o atributo obrigatório. Você também pode validar no cliente usando JavaScript, e há bibliotecas Next.js externas para ajudar a facilitar o processo.
Existem várias razões pelas quais a validação do formulário é essencial. Primeiro, ajuda a garantir que os dados inseridos em um formulário estejam completos e corretos. Isso é importante porque ajuda a evitar erros quando seu aplicativo envia dados para um servidor ou banco de dados.
Em segundo lugar, a validação de formulário pode ajudar a melhorar a usabilidade de um formulário, fornecendo feedback quando um usuário insere dados inválidos. Isso pode ajudar a evitar frustração e confusão por parte do usuário.
Por fim, a validação de formulário pode ajudar a melhorar a segurança de um formulário, garantindo que ele envie apenas dados válidos.
Como validar formulários em Next.js
Existem duas maneiras de validar formulários no Next.js: usando os métodos integrados ou usando bibliotecas externas.
Usando os métodos integrados
O HTML fornece vários métodos para validar formulários, sendo o mais comum o obrigatório atributo. Isso garante que um campo não pode ficar em branco. Você pode usar esse método em seu aplicativo Next.js simplesmente incluindo o atributo nas tags de entrada geradas. O HTML também fornece uma padrão atributo. Você pode usar isso junto com um expressão regular para validação mais complexa.
Este exemplo inclui um formulário com dois campos: nome e email. O campo de nome é obrigatório e o campo de e-mail deve corresponder a uma expressão regular.
importar Reagir de 'reagir'aulaMeuFormulárioestendeReagir.Componente{
render() {
retornar (
<forma >
<rótulo>
Nome:
<tipo de entrada ="texto" nome="nome" obrigatório />
</label>
<rótulo>
E-mail:
<tipo de entrada ="e-mail" nome="e-mail"
padrão ="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<tipo de entrada ="enviar" valor="Enviar" />
</form>
)
}
}
exportarpadrão MeuFormulário
Esse código importa a biblioteca React, cria uma classe chamada MyForm e renderiza um elemento de formulário. Dentro do elemento de formulário, existem dois elementos de rótulo.
O primeiro elemento de rótulo contém um campo de entrada de texto obrigatório. O segundo elemento label contém um campo de entrada de email com uma expressão regular em seu atributo padrão.
Finalmente, você tem um botão de envio. Quando um usuário envia o formulário, o atributo obrigatório garante que ele tenha preenchido o campo de nome. O atributo padrão do campo de e-mail garante que o e-mail esteja no formato especificado. Se alguma dessas condições falhar, o formulário não será enviado.
Existem algumas desvantagens em usar os métodos integrados. Primeiro, pode ser difícil acompanhar todas as diferentes regras de validação que você configurou. Em segundo lugar, se você tiver muitos campos, pode ser tedioso adicionar o atributo obrigatório a cada um. Por fim, os métodos integrados fornecem apenas validação básica. Se você quiser fazer uma validação mais complexa, precisará usar uma biblioteca externa.
Usando uma biblioteca externa
Além dos métodos integrados, também existem muitas bibliotecas externas que você pode usar para validar formulários. Algumas bibliotecas populares incluem Formik, react-hook-form e Yup.
Para usar uma biblioteca externa, primeiro você precisa instalá-la. Por exemplo, para instalar o Formik, execute o seguinte comando:
npm instalar formikDepois de instalar a biblioteca, você pode importá-la para seu componente e usá-la para validar seu formulário:
importar Reagir de 'reagir'
importar { Formulário, Formulário, Campo } de 'formik'const MeuFormulário = () => (
<Formik
valores iniciais={{ nome: '', e-mail: '' }}
validar={valores => {
const erros = {}
se (!valores.nome) {
errors.name = 'Obrigatório'
}
se (!valores.e-mail) {
errors.email = 'Obrigatório'
} outrose (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.teste (valores.email)
) {
errors.email = 'Endereço de email invalido'
}
retornar erros
}}
onSubmit={(valores, { setEnviar }) => {
setTimeout(() => {
alerta(JSON.stringify (valores, nulo, 2))
setEnviando(falso)
}, 400)
}}
>
{({ está enviando }) => (
<Forma>
<Tipo de campo="texto" nome="nome" />
<Tipo de campo="e-mail" nome="e-mail" />
<tipo de botão ="enviar" desativado={está enviando}>
Enviar
</button>
</Form>
)}
</Formik>
)
exportarpadrão MeuFormulário
Aqui, você primeiro importa o Formik, Forma, e Campo componentes da biblioteca Formik. Em seguida, crie um componente chamado MyForm. Este componente renderiza um formulário que possui dois campos: nome e email.
A propriedade initialValues define os valores iniciais dos campos do formulário. Nesse caso, os campos de nome e e-mail são strings vazias.
A propriedade valid define as regras de validação para os campos do formulário. Nesse caso, o campo de nome é obrigatório e o campo de email deve corresponder a uma expressão regular.
A propriedade onSubmit define a função que o React chamará quando o usuário enviar o formulário. Neste caso, a função é um alerta que exibirá os valores dos campos do formulário.
A propriedade isSubmitting determina se o formulário está sendo enviado no momento. Nesse caso, você o define como falso.
Por fim, renderize o formulário usando o componente Form do Formik.
Benefícios do uso de bibliotecas externas no Next.js
Há vários benefícios em usar uma biblioteca externa como o Formik para validar formulários no Next.js. Um benefício é que é muito mais fácil exibir mensagens de erro para o usuário. Por exemplo, se um campo obrigatório não for preenchido, o Formik exibirá automaticamente uma mensagem de erro incluindo uma sugestão de correção.
Outro benefício é que o Formik pode lidar com regras de validação mais complexas. Por exemplo, você pode usar o Formik para validar se dois campos são iguais (como uma senha e um campo de confirmação de senha).
Por fim, o Formik facilita o envio dos dados do formulário a um servidor. Por exemplo, você pode usar o Formik para enviar os dados do formulário para uma API.
Aumente o envolvimento do usuário usando formulários
Você pode usar formulários para aumentar o envolvimento do usuário. Ao fornecer feedback quando um usuário insere dados inválidos, você pode ajudar a evitar frustração e confusão.
Usando bibliotecas externas, você pode adicionar recursos como preenchimento automático e campos condicionais. Isso pode ajudar a tornar seus formulários ainda mais fáceis de usar. Quando usados corretamente, os formulários podem ser uma ferramenta poderosa para ajudá-lo a aumentar o envolvimento do usuário e coletar os dados de que você precisa.
Além da validação, o Next.js possui muitos recursos que você pode usar para aumentar o engajamento do usuário.