API de Validação: Validando Elementos de Formulário - JavaScript

Validação HTML5

O HTML5 suporta a validação nativa de formulários e seus elementos. Para isso, diversos atributos são utilizados nos campos de entrada para configurar a validação. Especificamente, podemos aplicar os seguintes atributos:

required: exige que o campo de entrada contenha algum valor.
max: define o valor numérico máximo (para entrada de dados numéricos).
min: define o valor numérico mínimo (para entrada de dados numéricos).
maxlength: define o comprimento máximo da string.
minlength: define o comprimento mínimo da string.

Por exemplo, consideremos a seguinte página:

<!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;}
    </style>
</head>
<body>
<form id="registerForm" name="registerForm" method="post" action="register">
<p>
    <label for="username">Username:</label><br>
    <input id="username" name="username" maxlength="20" minlength="3" required>
</p>
<p>
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required>
</p>
<p>
    <label for="age">Age:</label><br>
    <input type="number" id="age" name="age" min="1" max="110" value="18">
</p>
<button type="submit" id="submit" name="submit">Register</button>
</form>
</body>
</html>

Aqui, o campo username é configurado para receber um nome de usuário, exigindo um mínimo de 3 e um máximo de 20 caracteres. Os campos para nome e email são obrigatórios (possuem o atributo required). O campo age é destinado à entrada de uma idade, com valores mínimos e máximos estabelecidos de 1 a 110, respectivamente.

Vale destacar que, por meio do seletor input:invalid, podemos definir um estilo para campos inválidos, enquanto o seletor input:valid configura o estilo para campos que passaram pela validação.

Se inserirmos um valor que não corresponda aos atributos de validação, ou se não inserirmos nenhum valor nos campos requeridos, ao tentarmos enviar o formulário, o navegador exibirá uma mensagem de erro de validação para o campo correspondente:

A mensagem específica de validação depende do navegador utilizado; o exemplo fornecido é para o Google Chrome. No entanto, o que nos interessa aqui é como podemos interagir com a validação nativa do HTML5 no código JavaScript.

Obtendo Informações sobre Validação em JavaScript

Os navegadores modernos permitem interagir com o mecanismo de validação nativa do HTML5 através do JavaScript, utilizando para isso o Constraint Validation API. Esta API define uma série de propriedades aplicáveis a formulários ou elementos de formulário, permitindo verificar o estado de validação dos elementos:

willValidate: retorna um valor booleano indicando se a validação está disponível para o elemento do formulário. Retorna true se disponível e false se indisponível. Por exemplo, se o atributo disabled for aplicado a um elemento de formulário, tornando-o inacessível para interação, a validação para esse elemento não estará disponível. Em relação a outros elementos que não fazem parte do formulário, o valor retornado será undefined.
validity: retorna um objeto do tipo ValidityState, que contém informações sobre a validação do elemento do formulário. As propriedades do ValidityState incluem:
- valid: indica se o elemento passou pela validação (true) ou não (false).
- valueMissing: retorna true se um valor obrigatório está ausente.
- typeMismatch: retorna true se o valor inserido não corresponde ao tipo do elemento do formulário.
- patternMismatch: retorna true se o valor inserido não corresponde ao padrão especificado.
- tooLong: indica se o valor inserido excede o limite máximo permitido.
- tooShort: indica se o valor inserido é menor que o mínimo permitido.
- rangeUnderflow: retorna true se o valor inserido é menor que o intervalo permitido.
- rangeOverflow: retorna true se o valor inserido excede o intervalo permitido.
- stepMismatch: retorna true se o valor inserido não corresponde ao valor do atributo step.
- badInput: indica se o valor inserido é incorreto.
- customError: retorna true se um erro personalizado foi lançado durante a entrada.
validationMessage: contém a mensagem de erro de validação para o elemento atual do formulário. A mensagem é definida pelo navegador e pode variar de acordo com o tipo de erro.

Vamos aplicar algumas dessas propriedades para verificar a entrada em um elemento do formulário:

<!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;}
    </style>
</head>
<body>
<form id="registerForm" name="registerForm" method="post" action="register">
<p>
    <label for="email">E-mail:</label><br>
    <input type="email" id="email" name="email" required>
</p>
<button type="submit" id="submit" name="submit">Register</button>
</form>
<script>
const emailField = document.getElementById("email");  
emailField.addEventListener("change", validateEmail);
    
function validateEmail() {
    console.log("Pode ser validado:", emailField.willValidate);
    console.log("Valor ausente:", emailField.validity.valueMissing);
    console.log("Valor válido:", emailField.validity.valid);
    console.log("Correspondência de tipo:", emailField.validity.typeMismatch);
    console.log(emailField.validationMessage);
}
</script>
</body>
</html>

Veja o exemplo a seguir:

Obtendo informações sobre a validação de campos de formulário em JavaScript

Graças a isso, podemos realizar um processamento adicional das informações de validação, por exemplo, exibir mensagens de erro de validação na página:

<!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;}
    #emailErrors {padding:5px;background-color: #ffcccc; color:#b33939; display:none;}
    </style>
</head>
<body>
<form id="registerForm" name="registerForm" method="post" action="register">
<p>
    <label for="email">E-mail:</label><br>
    <input type="email" id="email" name="email" required>
    <div id="emailErrors"></div>
</p>
<button type="submit" id="submit" name="submit">Register</button>
</form>
<script>
const emailField = document.getElementById("email");
const emailErrors = document.getElementById("emailErrors");
emailField.addEventListener("change", validateEmail);

function validateEmail() {
    if(!emailField.validity.valid) {
        emailErrors.textContent = emailField.validationMessage;
        emailErrors.style.display = "block";
    } else {
        emailErrors.textContent = "";
        emailErrors.style.display = "none";
    }
}
</script>
</body>
</html>

Aqui, se houver um erro de validação, a mensagem será exibida no bloco emailErrors. Embora o navegador defina a mensagem de erro, podemos verificar a validação de acordo com parâmetros específicos e definir nossas próprias mensagens de erro, como no exemplo a seguir:

function validateEmail() {
    if(!emailField.validity.valueMissing) {
        emailErrors.textContent = "Email ausente!";
        emailErrors.style.display = "block";
    } else {
        emailErrors.textContent = "";
        emailErrors.style.display = "none";
    }
}

Exibindo mensagens de erro de validação dos campos de formulário em JavaScript