Formulários JavaScript
Validação de formulário JavaScript
A validação de formulários HTML pode ser feita por JavaScript.
Se um campo de formulário (fname) estiver vazio, esta função alerta uma mensagem e retorna false, para evitar que o formulário seja enviado:
Exemplo de JavaScript
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:
Exemplo de formulário HTML
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JavaScript pode validar entrada numérica
JavaScript é frequentemente usado para validar a entrada numérica:
Insira um número entre 1 e 10
Validação automática de formulário HTML
A validação do formulário HTML pode ser realizada automaticamente pelo navegador:
Se um campo de formulário (fname) estiver vazio, o requiredatributo impede que este formulário seja enviado:
Exemplo de formulário HTML
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
A validação automática de formulários HTML não funciona no Internet Explorer 9 ou anterior.
Data de validade
A validação de dados é o processo de garantir que a entrada do usuário seja limpa, correta e útil.
As tarefas típicas de validação são:
- o usuário preencheu todos os campos obrigatórios?
- o usuário digitou uma data válida?
- o usuário digitou 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 de muitas maneiras diferentes.
A validação do 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 para um servidor da web.
Validação de restrição HTML
HTML5 introduziu um novo conceito de validação HTML chamado validação de restrição .
A validação de restrição HTML é baseada em:
- Atributos de entrada HTML de validação de restrição
- Validação de restrição CSS pseudosseletores
- Propriedades e métodos do DOM de validação de restrição
Atributos de entrada HTML de validação de restrição
| Attribute | Description |
|---|---|
| disabled | Specifies that the input element should be disabled |
| max | Specifies the maximum value of an input element |
| min | Specifies the minimum value of an input element |
| pattern | Specifies the value pattern of an input element |
| required | Specifies that the input field requires an element |
| type | Specifies the type of an input element |
Para obter uma lista completa, acesse Atributos de entrada HTML .
Validação de restrição pseudosseletores CSS
| Selector | Description |
|---|---|
| :disabled | Selects input elements with the "disabled" attribute specified |
| :invalid | Selects input elements with invalid values |
| :optional | Selects input elements with no "required" attribute specified |
| :required | Selects input elements with the "required" attribute specified |
| :valid | Selects input elements with valid values |
Para obter uma lista completa, acesse CSS Pseudo Classes .