A validação de formulário em javaScript é um aspecto crucial do desenvolvimento web, garantindo que os dados inseridos pelos usuários estejam corretos e completos antes de serem enviados para o servidor(back-end).
O JavaScript oferece diversas ferramentas e técnicas para implementar validações robustas e flexíveis, aprimorando a experiência do usuário e prevenindo erros.
Este guia abrangente detalha os conceitos fundamentais da validação de formulário em javaScript, desde os métodos básicos até as técnicas mais avançadas.
Sumário do Artigo
1. Por que Devemos Criar Validação para Formulários
A validação de formulário em javaScript é essencial para aplicar regras de negócio aos campos definidos como obrigatórios ou que só podem receber um tipo específico de valor.
Isso ajuda a prevenir erros na entrada de dados e a fornecer feedback sobre os erros cometidos e como corrigi-los para os valores digitados.
A validação de formulário em javaScript é de grande importância e é amplamente utilizada na maioria dos sistemas.
Se você está iniciando no desenvolvimento front-end, aprender a validar a entrada de dados é crucial.
Confira também:
1.1 Tipos de Validação(Validação de Formulário em JavaScript)
Existem dois tipos principais de validação de dados: a validação do lado do cliente, utilizando a linguagem JavaScript, e a validação do lado do servidor, utilizando diversas linguagens de programação como Java, C#, entre outras linguagens back-end.
Alguns desenvolvedores argumentam que a validação deve ser aplicada no lado do cliente (front-end), enquanto outros acreditam que deve ficar no back-end.
Também há aqueles que optam por utilizar a validação em ambos os lados. Para um sistema mais seguro e com uma boa experiência de usuário, a abordagem de validação em ambos os lados é bastante interessante, mas tudo dependerá do tipo de projeto.
A validação no front-end, que é o foco deste post, normalmente utiliza JavaScript puro ou algum framework/biblioteca para realizar as validações de formulário.
O uso de frameworks e bibliotecas para validação é bastante útil, porém a validação com JavaScript puro proporciona um conhecimento mais profundo.
Ao aprender a manipular o DOM, torna-se mais fácil compreender o funcionamento dos frameworks. De fato, a validação de formulário em JavaScript utiliza o tão falado DOM (Document Object Model), que essencialmente manipula o HTML.
1.2 Benefícios da Validação de Formulário em JavaScript
- Resposta imediata ao usuário.
- Redução de requisições desnecessárias ao servidor.
- Melhor experiência do usuário.
- Prevenção de erros e problemas de segurança.
2. Métodos Básicos de Validação
2.1 Propriedades HTML5
Uma das maneiras mais limpas e rápidas de implementar validações é utilizar exclusivamente os atributos HTML, tais como required, pattern, type, min, max e step, para validações simples.
Essas propriedades já são validações intrínsecas do HTML, sendo um recurso fundamental da linguagem de marcação de hipertexto.
- required: Indica que um campo de entrada em um formulário é obrigatório para ser preenchido antes que o formulário possa ser enviado. Isso ajuda a garantir que certas informações importantes sejam fornecidas pelos usuários.
- pattern: É usado em campos de entrada para especificar um padrão que o valor inserido deve corresponder. Isso é comumente usado em campos de texto para validar endereços de email, números de telefone ou outros formatos específicos de entrada.
- type: Define o tipo de dado que um campo de entrada deve aceitar. Por exemplo, “text” para texto simples, “email” para endereço de email, “number” para números, “date” para datas, entre outros. Isso ajuda a garantir que o tipo correto de informação seja inserido pelos usuários.
- min: Define o valor mínimo aceitável para um campo de entrada numérico. Por exemplo, em um campo de número, você pode definir um valor mínimo que os usuários não podem ultrapassar.
- max: Define o valor máximo aceitável para um campo de entrada numérico. Isso é útil para definir limites superiores para valores inseridos pelos usuários.
- step: Especifica o intervalo entre os valores permitidos em um campo de entrada numérico. Por exemplo, se o passo for definido como “2”, os usuários só poderão inserir números em incrementos de 2.
2.2 Seleção de Elementos
Para validação usando JavaScript, é necessário realizar a seleção de elementos.
O que isso significa? O JavaScript possui funções da linguagem que permitem selecionar, por exemplo, tags, classes e ids do HTML, e posteriormente manipulá-los.
Esse recurso do JS é o DOM. Basicamente, ele tem acesso à estrutura hierárquica da árvore HTML, podendo manipulá-la de diversas formas.
Vamos entender primeiramente como selecionar esses elementos HTML através do JavaScript.
Vamos utilizar esta estrutura HTML para os exemplos:
<form id="meuFormulario">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" class="campo"><br><br>
<label for="sobrenome">Sobrenome:</label>
<input type="text" id="sobrenome" name="sobrenome" class="campo"><br><br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" class="campo"><br><br>
<input type="submit" value="Enviar">
</form>
No formulário HTML acima, os campos nome, sobrenome e e-mail possuem tags e propriedades.
A tag form e input, e as propriedades “name”, “id” e “class”.
Para selecionar esses elementos HTML é bem simples:
Exemplos de seleção por id:
<script>
// Seleção por ID
const formularioPorId = document.getElementById('meuFormulario');
const nomePorId = document.getElementById('nome');
const sobrenomePorId = document.getElementById('sobrenome');
const emailPorId = document.getElementById('email');
</script>
Exemplo de seleção por classe:
<!-- Selecionando campo nome -->
const tagName = formularioPorTag.getElementsByClassName('name');
Exemplos de seleção por Tag:
const formularioPorTag = document.getElementsByTagName('form');
Após criar uma variável como nos exemplos utilizados, utilizando a palavra reservada const seguida do nome da variável, é possível ter acesso ao elemento HTML.
3. Exemplo Completo de Validação em javaScript
Agora que já entendemos a seleção de elementos, vamos praticar a validação de fato.
imagine o seguinte senário em que será necessário criar um formulário de contato a regra exige que todos os campos sejam obrigatórios, o formulário deve ter os seguintes campos nome, sobrenome, e-mail e telefone.
quando o usuários clicar no botão enviar, haverá uma verificação se os campos foram preenchidos. para o campo que não for preenchido deve ser exibida um mensagem que o campo está em vazio.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<p class="msg-erro"></p>
<form action="" method="post">
<label>Nome: </label>
<input type="text" name="nome" class="nome">
<label>Sobrenome: </label>
<input type="text" name="sobrenome" class="sobrenome">
<label>E-mail: </label>
<input type="email" name="email" class="email">
<label>Telefone: </label>
<input type="text" name="tel" class="tel">
<button class="btn">Enviar</button>
</form>
</section>
<script src="script_form.js"></script>
</body>
</html>Codigo javaScript:
class ValidateInit
{
getElements()
{
const nome = document.querySelector(".nome");
const sobrenome = document.querySelector(".sobrenome");
const email = document.querySelector(".email");
const tel = document.querySelector(".tel");
const btn = document.querySelector(".btn");
const msgErro = document.querySelector(".msg-erro");
return {nome, sobrenome, email, tel, btn, msgErro}
}
events()
{
const {nome, sobrenome, email, tel, btn, msgErro} = this.getElements();
btn.addEventListener("click", (e)=>{
nome.style.border = "none";
sobrenome.style.border = "none";
email.style.border = "none";
tel.style.border = "none";
if(!nome.value)
{
msgErro.innerHTML = "O campo nome é obrigatorio, por favor preencher";
nome.style.border = "3px solid red";
e.preventDefault();
return;
}
if(!sobrenome.value)
{
msgErro.innerHTML = "O campo sobrenome é obrigatorio, por favor preencher";
sobrenome.style.border = "3px solid red";
e.preventDefault();
return;
}
if(!email.value)
{
msgErro.innerHTML = "O campo e-mail é obrigatorio, por favor preencher";
email.style.border = "3px solid red";
e.preventDefault();
return;
}
if(!tel.value)
{
msgErro.innerHTML = "O campo telefone é obrigatorio, por favor preencher";
tel.style.border = "3px solid red";
comfirmpassword.style.border = "3px solid red";
e.preventDefault();
return;
}
});
}
}
validate = new ValidateInit();
validate.events();O código acima é um exemplo de como aplicar as regras que exploramos até agora.
Recomendo praticar a criação e validação do seu próprio formulário, incluindo também a criação de um CSS para montar efetivamente uma página de conta.
Dessa forma, o conteúdo será absorvido com maior eficácia, pois no mundo da programação, é a prática que proporciona experiência.
Conclusão
A validação de formulário em JavaScript é uma ferramenta essencial para garantir a qualidade dos dados coletados em sites e aplicações web.
Ao dominar as técnicas você estará apto a implementar validações robustas, flexíveis e acessíveis, proporcionando uma experiência melhor para os usuários e evitando problemas relacionados a dados incorretos ou incompletos.
Lembre-se sempre de testar exaustivamente suas validações em diferentes cenários para garantir sua eficácia em diversos ambientes.
