JavaScript Validation API

❮ Previous Next ❯

Constraint Validation DOM Methods

Property	Description
checkValidity()	Indicates whether the data in an input element is valid or not.
setCustomValidity()	Adjusts the validationMessage attribute of an input element.

If the information you put into a box isn't right, show a message.

Constraint Validation DOM Properties

Property	Description
validity	This holds true/false properties regarding whether an input element is valid.
validationMessage	Displays a message in the browser when the validity is not true.
willValidate	Specifies whether an input field will undergo validation.

Validity Properties

The validity property of an input element has various properties that deal with how valid the data is.

Property	Description
customError	If a custom validity message is set, then set it to true.
patternMismatch	If an element's value doesn't match what's in its pattern attribute, then set it to true.
rangeOverflow	If a thing's value is more than what it's supposed to be, then set this to true.
rangeUnderflow	If a value of an element is smaller than its minimum attribute, set it to true.
stepMismatch	If the value of an element doesn't fit with its step rule, set this to true.
tooLong	If a value of an element is longer than the maxLength attribute, set it to true.
typeMismatch	If a thing isn't right according to its type, set this to true.
valueMissing	If a required element doesn't have any value, set this attribute to true.
valid	Set as true if the value of an element is correct.

Examples

If the number entered into a box is higher than 100 (the maximum value allowed by the box'smax attribute), show a message:

If the number entered into a box is lower than 100 (defined by the input'smin attribute), show a message:

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

<!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 entered is higher than 100, which is the maximum allowed, an error message will show up.</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>

<!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 entered is smaller than 100 (which is the minimum allowed), a message showing an error will appear.</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>

❮ Previous Next ❯

JavaScript Tutorial

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics

JavaScript Validation API

Constraint Validation DOM Methods

Constraint Validation DOM Properties

Validity Properties

Examples

Web Development