Ověření formuláře JavaScript

Obsah

Metody ověřování omezení DOM

checkValidity(): Vrátí hodnotu true, pokud vstupní prvek obsahuje platná data.
setCustomValidity(): Nastavuje vlastnost validationMessage vstupního prvku.

Pokud vstupní pole obsahuje neplatná data, zobrazí se zpráva:

Metoda 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>

Zkuste to sami →

<!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>

Ověření omezení Vlastnosti DOM

validity: Obsahuje booleovské vlastnosti související s platností vstupního prvku.
validationMessage: Obsahuje zprávu, kterou prohlížeč zobrazí, když je platnost nepravdivá.
willValidate: Označuje, zda bude vstupní prvek ověřen.

Vlastnosti platnosti

Vlastnost platnosti vstupního prvku obsahuje číslo vlastností souvisejících s platností údajů:

customError: Nastavte na hodnotu true, pokud je nastavena vlastní zpráva o platnosti.
patternMismatch: Nastavte na hodnotu true, pokud hodnota prvku neodpovídá jeho atributu pattern.
rangeOverflow: Nastavte na hodnotu true, pokud je hodnota prvku větší než jeho atribut max.
rangeUnderflow: Nastavte na hodnotu true, pokud je hodnota prvku menší než jeho atribut min.
stepMismatch: Nastavte na hodnotu true, pokud je hodnota prvku podle jeho atributu step neplatná.
tooLong: Nastavte na hodnotu true, pokud hodnota prvku překročí jeho atribut maxLength.
typeMismatch: Nastavte na hodnotu true, pokud je hodnota prvku neplatná podle atributu typu.
valueMissing: Nastavte na hodnotu true, pokud prvek (s povinným atributem) nemá žádnou hodnotu.
valid: Nastavte na true, pokud je hodnota prvku platná.

Příklady

Pokud je číslo ve vstupním poli větší než 100 (max vstupu atribut), zobrazí zprávu:

Vlastnost 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>

Zkuste to sami →

<!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>

Pokud je číslo ve vstupním poli menší než 100 (atribut min vstupu), zobrazí se zpráva:

Vlastnost 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>

Zkuste to sami →

<!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>