API de Validação do JavaScript

Métodos e atributos de validação de restrição do DOM

Método

Método descrição
checkValidity() Retorna true se o elemento input contiver dados válidos.
setCustomValidity() Define o atributo validationMessage do elemento input.

propriedade

propriedade descrição
validity Contém os atributos booleanos relacionados à validade do elemento input.
validationMessage Contém a mensagem que o navegador exibirá quando a validação for falsa.
willValidate Indica se o elemento input será validado.

Exemplo - método checkValidity()

Se o campo de entrada contiver dados inválidos, exibirá uma mensagem:

<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

propriedades de validação

do elemento inputpropriedades de validaçãocontém muitas propriedades relacionadas à validação de dados:

propriedade descrição
customError se for definida uma mensagem de validação personalizada, definido como true.
patternMismatch se o valor do elemento não correspondente ao seu atributo pattern, definido como true.
rangeOverflow se o valor do elemento for maior que seu atributo max, definido como true.
rangeUnderflow se o valor do elemento for menor que seu atributo min, definido como true.
stepMismatch se o valor do elemento for inválido conforme seu atributo step, definido como true.
tooLong se o valor do elemento for maior que seu atributo maxLength, definido como true.
typeMismatch se o valor do elemento for inválido conforme seu atributo type, definido como true.
valueMissing se o elemento (com a propriedade required) não tiver valor, definido como true.
valid se o valor do elemento for válido, definido como true.

exemplo

propriedade rangeOverflow

se o número do campo input for maior que 100 (input max Se a propriedade) for exibida uma mensagem:

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Valor OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Valor demasiado grande";
  }
}
</script>

Experimente você mesmo

propriedade rangeUnderflow

se o número do campo input for maior que 100 (input max Se a propriedade) for exibida uma mensagem:

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = = "Valor OK";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Valor muito pequeno";
  }
}
</script>

Experimente você mesmo