Validação de formulário JavaScript

Índice

Métodos DOM de validação de restrição

checkValidity(): Retornará verdadeiro se um elemento de entrada contiver dados válidos.
setCustomValidity(): Define a propriedade validaçãoMessage de um elemento de entrada.

Se um campo de entrada contiver dados inválidos, exiba uma mensagem:

O método checkValidity()

<input id="id1" type="number" min="100" max="300" 
    required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
 function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}
</script>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
  } 
} 
</script>

</body>
</html>

Propriedades DOM de validação de restrição

validity: Contém propriedades booleanas relacionadas à validade de um elemento de entrada.
validationMessage: Contém a mensagem que um navegador exibirá quando a validade for falsa.
willValidate: Indica se um elemento de entrada será validado.

Propriedades de Validade

A propriedade de validade de um elemento de entrada contém um número de propriedades relacionadas à validade dos dados:

customError: Definido como verdadeiro, se uma mensagem de validade personalizada for definida.
patternMismatch: Definido como verdadeiro, se o valor de um elemento não corresponder ao seu atributo padrão.
rangeOverflow: Definido como verdadeiro, se o valor de um elemento for maior que seu atributo max.
rangeUnderflow: Definido como verdadeiro, se o valor de um elemento for menor que seu atributo min.
stepMismatch: Definido como verdadeiro, se o valor de um elemento for inválido de acordo com seu atributo step.
tooLong: Definido como verdadeiro, se o valor de um elemento exceder seu atributo maxLength.
typeMismatch: Definido como verdadeiro, se o valor de um elemento for inválido de acordo com seu atributo de tipo.
valueMissing: Definido como verdadeiro, se um elemento (com um atributo obrigatório) não tiver valor.
valid: Definido como verdadeiro, se o valor de um elemento for válido.

Exemplos

Se o número em um campo de entrada for maior que 100 (o max da entrada atributo), exibe uma mensagem:

A propriedade rangeOverflow

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
  let text = "Value OK";
    if (document.getElementById("id1").validity.rangeOverflow) {
      text = "Value too large";
    }
}
</script>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p>If the number is greater than 100 (the input's max attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Se o número em um campo de entrada for menor que 100 (o atributo min da entrada), exiba uma mensagem:

A propriedade rangeUnderflow

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>
<script>
function myFunction() {
  let text = "Value OK";
    if (document.getElementById("id1").validity.rangeUnderflow) {
      text = "Value too small";
    }
}
</script>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>