A validação do formulário HTML pode ser feita por JavaScript.
Se um campo do formulário (fname) estiver vazio, esta função alerta uma mensagem e retorna false, para evitar que o formulário seja enviado:
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}A função pode ser chamada quando o formulário é enviado:
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
JavaScript é frequentemente usado para validar entradas numéricas:
Por favor insira um número entre 1 e 10
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
// Get the value of the input field with id="numb"
let x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
A validação do formulário HTML pode ser realizada automaticamente pelo navegador:
Se um campo de formulário (fname) estiver vazio, o atributo required impede que este formulário seja submetido:
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>
</body>
</html>
A validação automática de formulário HTML não funciona no Internet Explorer 9 ou anterior.
A validação de dados é o processo de garantir que a entrada do usuário seja limpa, correto e útil.
As tarefas típicas de validação são:
o usuário preencheu todos os campos obrigatórios?
o usuário inseriu uma data válida?
o usuário inseriu texto em um campo numérico?
Na maioria das vezes, o objetivo da validação de dados é garantir a entrada correta do usuário.
A validação pode ser definida por muitos métodos diferentes e implantada em muitos jeitos diferentes.
A validação no lado do servidor é realizada por um servidor web, após a entrada ter sido enviada ao servidor.
A validação do lado do cliente é realizada por um navegador da web, antes que a entrada seja enviada a um servidor da web.
HTML5 introduziu um novo conceito de validação de HTML chamado restrição validação.
A validação de restrição HTML é baseada em:
Validação de restrição HTML Atributos de entrada
Validação de restrição Pseudosseletores CSS
Validação de restrição Propriedades e métodos DOM
Especifica que o elemento input deve ser desabilitado
Especifica o valor máximo de um elemento de entrada
Especifica o valor mínimo de um elemento de entrada
Especifica o padrão de valor de um elemento de entrada
Especifica que o campo de entrada requer um elemento
Especifica o tipo de um elemento de entrada
Para uma lista completa, vá para HTML Atributos de entrada.
Seleciona elementos de entrada com o atributo "disabled" especificado
Seleciona elementos de entrada com valores inválidos
Seleciona elementos de entrada sem nenhum atributo "obrigatório" especificado
Seleciona elementos de entrada com o atributo "obrigatório" especificado
Seleciona elementos de entrada com valores válidos
Para uma lista completa, vá para CSS Pseudo-aulas.