Os navegadores modernos possuem uma validação de formulários interna poderosa, que pode ser usada para garantir que os dados inseridos pelos usuários sejam válidos antes de enviar o formulário. Isso elimina a necessidade de bibliotecas JavaScript pesadas para validação básica. Vamos explorar os principais atributos HTML nativos que você pode usar para validar formulários.
Aqui estão alguns dos atributos HTML mais úteis para validação de formulários:
required<input type="text" name="nome" required>
type<input type="email" name="email" required>
<input type="number" name="idade" min="18" max="99">
<input type="url" name="website">
min e max<input type="number" name="quantidade" min="1" max="10">
<input type="date" name="data" min="2023-01-01" max="2023-12-31">
minlength e maxlength<input type="text" name="senha" minlength="8" maxlength="20" required>
pattern<input type="text" name="cep" pattern="\d{5}-\d{3}" placeholder="12345-678" required>
step<input type="number" name="quantidade" min="0" max="100" step="5">
novalidate<form novalidate>
<input type="email" name="email" required>
<button type="submit">Enviar</button>
</form>
Aqui está um exemplo de formulário que usa vários atributos de validação nativos:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulário com Validação Nativa</title>
<style>
input:invalid {
border-color: #ff0000;
}
input:valid {
border-color: #00ff00;
}
</style>
</head>
<body>
<form>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required minlength="3" maxlength="50">
<br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="idade">Idade:</label>
<input type="number" id="idade" name="idade" min="18" max="99" required>
<br>
<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha" minlength="8" maxlength="20" required>
<br>
<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="https://exemplo.com">
<br>
<label for="cep">CEP:</label>
<input type="text" id="cep" name="cep" pattern="\d{5}-\d{3}" placeholder="12345-678" required>
<br>
<button type="submit">Enviar</button>
</form>
</body>
</html>
Validação Nativa:
:invalid).Estilos Personalizados:
:invalid e :valid para estilizar campos inválidos e válidos,
respectivamente.Mensagens de Erro:
Simplicidade:
Desempenho:
Acessibilidade:
Compatibilidade:
Se você quiser personalizar as mensagens de erro, pode usar JavaScript:
document.querySelector('form').addEventListener('submit', (event) => {
const campo = document.getElementById('cep');
if (!campo.validity.valid) {
campo.setCustomValidity('Por favor, insira um CEP válido no formato 12345-678.');
campo.reportValidity();
event.preventDefault(); // Impede o envio do formulário
} else {
campo.setCustomValidity(''); // Limpa a mensagem de erro
}
});
A validação de formulários com atributos HTML nativos é uma maneira eficiente e poderosa de garantir que os dados inseridos pelos usuários sejam válidos. Use esses atributos para simplificar seu código e melhorar a experiência do usuário.