Validação Programática de Formulários em JavaScript

Métodos de Validação

No tema anterior, exploramos como obter o estado usando as propriedades de Constraint Validation API. Além dessas propriedades, a API também oferece uma série de métodos que permitem controlar a validação:

checkValidity(): verifica se um elemento de formulário ou o formulário inteiro passa na validação. Este método pode ser chamado tanto para o formulário quanto para seus elementos individuais. Um elemento é considerado válido se atender a todos os atributos de validação. Um formulário é válido se todos os seus elementos passarem na validação. Se o formulário ou seus elementos passarem na validação, retorna true, caso contrário, retorna false.
reportValidity(): também verifica se um elemento de formulário ou o formulário inteiro passa na validação. No entanto, ao contrário de checkValidity(), este método também exibe os erros de validação.
setCustomValidity(): permite personalizar as mensagens de validação.

Um exemplo de uso do método checkValidity():

<form id="registerForm" name="registerForm" method="post" action="register">
  <p>
    <label for="username">Nome de usuário:</label><br />
    <input id="username" name="username" maxlength="20" minlength="3" required />
  </p>
  <p>
    <label for="age">Idade:</label><br />
    <input type="number" id="age" name="age" min="1" max="110" required />
  </p>
  <button type="submit" id="submit" name="submit">Registrar</button>
</form>
<script>
  const registerForm = document.registerForm;
  const submit = registerForm.submit;
  submit.addEventListener("click", validate);

  function validate() {
    if (!registerForm.username.checkValidity()) {
      console.log("Nome de usuário inválido");
    }
    if (!registerForm.age.checkValidity()) {
      console.log("Idade inválida");
    }
    if (!registerForm.checkValidity()) {
      console.log("Dados do formulário inválidos");
    }
  }
</script>

Personalização de Mensagens de Validação

Para personalizar suas mensagens de validação, o método setCustomValidity() recebe a mensagem necessária:

<form id="registerForm" name="registerForm">
  <p>
    <label for="username">Nome de usuário:</label><br />
    <input id="username" name="username" maxlength="20" minlength="3" required />
  </p>
  <button type="submit" id="submit" name="submit">Registrar</button>
</form>
<script>
  const registerForm = document.registerForm;
  const submit = registerForm.submit;
  submit.addEventListener("click", validate);

  function validate() {
    if (registerForm.username.validity.valueMissing) {
      registerForm.username.setCustomValidity("É necessário inserir o nome de usuário");
    }
    if (registerForm.username.validity.tooLong) {
      registerForm.username.setCustomValidity("O nome de usuário não deve exceder 20 caracteres");
    }
    if (registerForm.username.validity.tooShort) {
      registerForm.username.setCustomValidity("O nome de usuário não deve ter menos de 3 caracteres");
    }
  }
</script>

Aqui, ao enviar o formulário, verificamos o valor do campo de nome de usuário. Dependendo de qual regra de validação não é atendida, estabelecemos a mensagem de erro correspondente. E o navegador também usará essas mensagens:

Configuração de Erros de Validação em JavaScript

Definindo suas Próprias Regras de Validação

Ao validar, não estamos limitados às regras de validação embutidas que são aplicadas a um elemento do formulário por meio dos atributos required, minlength, maxlength, min, max, ou dependendo do tipo do campo de entrada. Quando necessário, podemos estabelecer nossa própria lógica de validação para cenários personalizados. Por exemplo, consideremos o caso mais simples: o nome de usuário não deve ser "admin". Para isso, definimos o seguinte programa:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
    <style>
        input {width: 150px;}
        input:invalid {border-color: red; }
        input:valid { border-color: green;}
        #usernameErrors {padding:5px;background-color: #ffcccc; color:#b33939; display:none;}
    </style>
</head>
<body>
<form id="registerForm" name="registerForm">
    <p>
        <label for="username">Nome de usuário:</label><br>
        <input id="username" name="username" maxlength="20" minlength="3" required>
        <div id="usernameErrors"></div>
    </p>
    <button type="submit" id="submit" name="submit">Registrar</button>
</form>
<script>
const usernameErrors = document.getElementById("usernameErrors");
const usernameField = document.registerForm.username;
const submit = registerForm.submit;
submit.addEventListener("click", validate);

function validate(e) {
    if (usernameField.value === "admin") {
        usernameField.setCustomValidity("Nome de usuário inaceitável");
    }
    // verifica a validação
    if (!usernameField.validity.valid) {
        usernameErrors.textContent = usernameField.validationMessage;
        usernameErrors.style.display = "block";
    }
    else {
        usernameErrors.textContent = "";
        usernameErrors.style.display = "none";
        e.preventDefault(); // previne o envio do formulário e recarregamento da página
    }
}
</script>
</body>
</html>

Lógica de Validação Personalizada em JavaScript