Utilização de JavaScript para validações personalizadas

O JavaScript é uma poderosa linguagem de programação que pode ser utilizada para adicionar interatividade e funcionalidades extras a um site.

Quando se trata de formulários em HTML5, o JavaScript pode ser empregado para realizar validações personalizadas nos campos, garantindo que os dados inseridos pelos usuários estejam corretos antes do envio.

1. Evento onsubmit:
Para realizar uma validação personalizada em um formulário, primeiro precisamos entender o evento onsubmit.

Esse evento é acionado quando o usuário tenta enviar o formulário, seja clicando em um botão “Enviar” ou pressionando a tecla “Enter” em algum campo.

Podemos utilizar o JavaScript para associar uma função a esse evento e, assim, realizar a validação.

2. Criando a função de validação:
A função de validação é responsável por verificar se os campos do formulário estão preenchidos corretamente. Vamos criar um exemplo de validação que verifica se um campo de e-mail está preenchido com um endereço de e-mail válido.

<form onsubmit="return validarFormulario()">
  <input type="email" id="email" placeholder="Digite seu e-mail">
  <button type="submit">Enviar</button>
</form>

<script>
  function validarFormulario() {
    var email = document.getElementById('email').value;
    var regexEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!regexEmail.test(email)) {
      alert('Por favor, digite um endereço de e-mail válido.');
      return false;
    }

    // Aqui você pode adicionar outras validações, se necessário.

    return true; // O formulário será enviado se todas as validações passarem.
  }
</script>

3. Explicação do Código:

• A tag <form> possui o atributo onsubmit, que chama a função validarFormulario() quando o formulário é enviado.
• Na função validarFormulario(), obtemos o valor do campo de e-mail usando document.getElementById('email').value.
• Utilizamos uma expressão regular (regexEmail) para verificar se o e-mail está em um formato válido.
• Se o e-mail não estiver em um formato válido, exibimos um alerta ao usuário e retornamos false para impedir o envio do formulário.
• Se o e-mail estiver em um formato válido, o formulário será enviado normalmente.

4. Outras Validações:
Você pode criar várias outras validações personalizadas utilizando JavaScript. Por exemplo, verificar se campos obrigatórios estão preenchidos, se senhas coincidem ou se um campo numérico contém apenas números.

Utilizando JavaScript, podemos adicionar validações personalizadas aos formulários para garantir que os dados informados pelos usuários sejam corretos e válidos.

As possibilidades são amplas, e a combinação do evento onsubmit com funções de validação é uma forma eficaz de tornar a experiência do usuário mais amigável e segura.

Compartilhar

Compartilhar

Siga-me