Como implementar validação de formulário do lado do cliente com JavaScript

agosto 25, 2021 gurinho

JavaScript é uma das linguagens de programação mais populares e versáteis com a qual você pode começar hoje. Esta linguagem de programação é justamente considerada a linguagem da web e é essencial para adicionar interatividade aos seus sites.

O elemento de formulário é um dos elementos HTML mais usados em sites. Esses formulários recebem informações do usuário e as processam no navegador ou servidor. No entanto, é importante validar essas entradas para resolver problemas de segurança e bugs indesejados.

Compreendendo a manipulação de DOM

Antes de prosseguirmos com a implementação da validação de formulário do lado do cliente com JavaScript, é essencial entender o Document Object Model, comumente conhecido como "DOM". O DOM é uma API padronizada que permite ao JavaScript interagir com elementos em uma página HTML da web.

Saiba mais: O herói oculto dos sites: Compreendendo o DOM

Para adicionar ouvintes de eventos e recuperar entradas do usuário, você precisará entender os fundamentos da manipulação de DOM. Aqui está um exemplo que explica como você pode alterar o conteúdo da página da web usando a API DOM e JavaScript:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 </head>
 <body>
 <p id="paragraph"></p>
 </body>
 <script>
 const paragraph = document.getElementById('parapgraph');
 paragraph.innerText = 'This is a paragraph tag';
 </script>
 </html>

No código acima, a tag <p> possui um id de parágrafo . Ao escrever o código JavaScript, você pode acessar esse elemento chamando o método document.getElementById ('paragraph') e manipulando seu valor.

Agora que você entendeu os fundamentos da manipulação de DOM, vamos prosseguir e implementar a validação de formulário.

Validação de formulário com JavaScript

Existem vários tipos de entradas que você pode obter de um usuário. Tipo de texto, tipo de e-mail, tipo de senha, botões de opção e caixas de seleção são alguns dos mais comuns que você pode encontrar. Devido a essa grande maioria de tipos de entrada, você precisará usar lógicas diferentes para validar cada um deles.

Antes de nos aprofundarmos na validação, vamos parar um momento para entender os formulários HTML e sua importância. Os formulários HTML são uma das principais maneiras de interagir com o site, pois permitem inserir seus dados, aplicar alterações, invocar pop-ups, enviar informações a um servidor e muito mais.

O elemento HTML <form> é usado para criar esses formulários voltados para o usuário. Veja como você pode validar as entradas de um formulário HTML:

1. Validação de Email

Esteja você construindo um sistema de autenticação ou apenas coletando e-mails de usuários para seu boletim informativo, é importante validar o e-mail antes de armazená-lo em seu banco de dados ou processá-lo. Para verificar se um e-mail atende a todas as condições exigidas, você pode usar uma expressão regular .

HTML:

 <input type="email" placeholder="[email protected]" id="email" required />

JavaScript:

 const emailInput = document.getElementById('email');
 const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
 if (!emailInput.value.match(emailRegex)) {
 alert('Invalid email address.');
 }

2. Validação de senha

As senhas são um dado crucial que precisa de um tipo especial de validação para garantir sua segurança. Considere um formulário de inscrição com dois campos: campos de senha e de confirmação de senha. Para validar esse par de entradas, aqui estão algumas coisas que você precisa considerar:

A senha deve ter mais de 6 caracteres.
O valor da senha e o campo de confirmação da senha devem ser iguais.

HTML:

 <input type="password" placeholder="Enter your password" id="password" required />
 <input type="password" placeholder="Enter your password" id="confirm-password" required />

JavaScript:

 const password = document.getElementById('password').value;
 const confirmPassword = document.getElementById('confirm-password').value;
 if (password.value !== confirmPassword.value) {
 alert('Entered passwords do not match');
 }
 if (password.length < 6) {
 alert('Password must be more than 6 characters long')
 }

3. Validação de entrada de rádio

A entrada de rádio HTML é um tipo especial de elemento de controle gráfico que permite ao usuário escolher apenas um de um conjunto predefinido de opções mutuamente exclusivas. Um caso de uso comum de tal entrada seria para selecionar o gênero. Para validar essa entrada, você precisará verificar se pelo menos um deles está selecionado.

Isso pode ser conseguido usando os operadores lógicos , como o operador AND ( && ) e NOT ( ! ) Desta maneira:

HTML:

 <label for="male">Male</label>
 <input type="radio" id="male" name="gender" value="male" />
 <label for="female">Female</label>
 <input type="radio" id="female" name="gender" value="female" />
 <label for="others">Others</label>
 <input type="radio" id="others" name="gender" value="others" />

JavaScript:

 const genders = document.getElementsByName("gender");
 const validForm = false;
 let i = 0;
 while (!validForm && i < radios.length) {
 if (radios[i].checked) validForm = true;
 i++;
 }
 if (!validForm) alert("Must check some option!");

4. Selecione Validação de entrada

O elemento HTML <select> é usado para criar uma lista suspensa. As tags <option> dentro do elemento <select> definem as opções disponíveis na lista suspensa. Cada uma dessas tags <option> possui um atributo de valor associado a elas.

Para a opção padrão ou inicial, você pode definir seu valor como uma string vazia para que seja considerada uma opção inválida. Para todas as outras opções, defina um atributo de valor apropriado. Aqui está um exemplo de como você pode validar um elemento de entrada <select> :

HTML:

 <select id="title" required>
 <option value="">Select One</option>
 <option value="Mr">Mr</option>
 <option value="Mrs">Mrs</option>
 <option value="Ms">Ms</option>
 </select>

JavaScript:

 const title = document.getElementById('title');
 if (title.value = "") {
 alert('Please select a title');
 }

5. Validação da caixa de seleção

Os elementos de entrada da caixa de seleção de tipo são renderizados por padrão como caixas que são marcadas ou marcadas quando ativadas. Uma caixa de seleção permite selecionar valores únicos para envio em um formulário. As caixas de seleção são uma escolha comum para a entrada "aceitar os termos e condições".

Para descobrir se uma caixa de seleção está marcada ou não, você pode acessar o atributo marcado na entrada da caixa de seleção. Aqui está um exemplo:

HTML:

 <input type="checkbox" id="terms">
 <label for="terms">I agree to the terms and conditions</label>

JavaScript:

 const terms = document.getElementById('terms');
 if (!terms.checked) {
 alert('Please agree to the terms and conditions to proceed further.');
 }

Prevenção é melhor que a cura

É sempre recomendável validar todas as entradas que você recebe de um visitante para fornecer uma experiência segura e protegida. Os hackers estão sempre tentando inserir dados maliciosos nos campos de entrada para realizar ataques de script entre sites e injeções de SQL.

Agora que você sabe como validar suas entradas de HTML, por que não tentar construir um formulário e implementar as estratégias que você viu acima?