Formulários JavaScript

Validação de formulários JavaScript

A validação de formulários HTML pode ser feita com JavaScript.

Se o campo do formulário (fname) estiver vazio, a função exibirá uma mensagem e retornará false, para evitar que o formulário seja enviado:

Exemplo JavaScript

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("O nome deve ser preenchido");
    return false;
  }
}

A função pode ser chamada ao enviar o formulário:

Exemplo de formulário HTML

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Nome: <input type="text" name="fname">
<input type="submit" value="Enviar">
</form>

Experimente pessoalmente

O JavaScript pode validar entradas numéricas

O JavaScript é geralmente usado para validar entradas numéricas:

Insira um número entre 1 e 10:

Experimente pessoalmente

Validação automática de formulários HTML

A validação de formulários HTML pode ser executada automaticamente pelo navegador:

Se o campo do formulário (fname) estiver vazio, então required Os atributos evitarão 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="Enviar">
</form>

Experimente pessoalmente

Dica:A validação automática de formulários HTML não funciona no Internet Explorer 9 ou versões anteriores.

Validação de dados

A validação de dados é o processo de garantir que o usuário insira dados limpos, corretos e úteis.

Tarefas de validação típicas incluem:

  • O usuário preencheu todos os campos obrigatórios?
  • O usuário inseriu uma data válida?
  • O usuário digitou texto no campo numérico?

Na maioria dos casos, o objetivo da validação de dados é garantir que o usuário insira corretamente.

A validação pode ser definida por muitos métodos diferentes e implementada de várias maneiras.

A validação do lado do servidor é executada pelo servidor web após os dados serem enviados para o servidor.

Antes de enviar dados para o servidor web, a validação do cliente é executada pelo navegador web.

Validação de restrições HTML

O HTML5 introduziu um novo conceito de validação HTML chamado validação de restrições.

A validação HTML baseia-se em:

  • Atributos de Validação de Restrição HTML Input
  • Seletor Pseudo-Classe de Validação de Restrição CSS
  • Atributos e Métodos de Validação DOM

Atributos de Validação de Restrição HTML Input

Atributo Descrição
disabled Especificar que o elemento input deve ser desativado.
max Especificar o valor máximo do elemento input.
min Especificar o valor mínimo do elemento input.
pattern Especificar o padrão de valor do elemento input.
required Especificar que o campo input é obrigatório.
type Especificar o tipo do elemento input.

Para uma lista completa, acesse Atributos de Input HTML.

Seletor Pseudo-Classe de Validação de Restrição CSS

Seletor Descrição
:disabled Selecione o elemento input que especifica o atributo "disabled".
:invalid Selecione o elemento input com valor inválido.
:opcional Selecione o elemento input que não especifica o atributo "required".
:required Selecione o elemento input que especifica o atributo "required".
:valid Selecione o elemento input com valor válido.

Para uma lista completa, acesse Pseudo-classes CSS.