---
title: JavaScript Validation API
description: "## Constraint Validation DOM Methods | Property | Description | | --- | --- | | checkValidity() | Returns true if an input element contains valid data. | | setCustomValidity() | Sets the validationMessage property of an input element. |…"
url: "https://apprentice.mn/docs/javascript-validation-api/"
updated: "2021-05-18"
category: Javascript
---

# JavaScript Validation API

## Constraint Validation DOM Methods

| Property | Description |
| --- | --- |
| checkValidity() | Returns true if an input element contains valid data. |
| setCustomValidity() | Sets the validationMessage property of an input element. |

---

If an input field contains invalid data, display a message:

### The checkValidity() Method

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

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

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

## Constraint Validation DOM Properties

| Property | Description |
| --- | --- |
| validity | Contains boolean properties related to the validity of an input element. |
| validationMessage | Contains the message a browser will display when the validity is false. |
| willValidate | Indicates if an input element will be validated. |

---

                

---

## Validity Properties

The **validity property** of an input element contains a number of properties related to the validity of data:

| Property | Description |
| --- | --- |
| customError | Set to true, if a custom validity message is set. |
| patternMismatch | Set to true, if an element’s value does not match its pattern attribute. |
| rangeOverflow | Set to true, if an element’s value is greater than its max attribute. |
| rangeUnderflow | Set to true, if an element’s value is less than its min attribute. |
| stepMismatch | Set to true, if an element’s value is invalid per its step attribute. |
| tooLong | Set to true, if an element’s value exceeds its maxLength attribute. |
| typeMismatch | Set to true, if an element’s value is invalid per its type attribute. |
| valueMissing | Set to true, if an element (with a required attribute) has no value. |
| valid | Set to true, if an element’s value is valid. |

---

## Examples

If the number in an input field is greater than 100 (the input’s `max` attribute), display a message:

### The rangeOverflow Property

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

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

<script>
function myFunction() {
  var txt = "";
  if (document.getElementById("id1").validity.rangeOverflow) {
    txt = "Value too large";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>`

If the number in an input field is less than 100 (the input’s `min` attribute), display a message:

### The rangeUnderflow Property

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

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

<script>
function myFunction() {
  var txt = "";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    txt = "Value too small";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fjavascript-validation-api%2F&linkname=JavaScript%20Validation%20API](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fjavascript-validation-api%2F&linkname=JavaScript%20Validation%20API)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fjavascript-validation-api%2F&linkname=JavaScript%20Validation%20API](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fjavascript-validation-api%2F&linkname=JavaScript%20Validation%20API)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fjavascript-validation-api%2F&linkname=JavaScript%20Validation%20API](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fjavascript-validation-api%2F&linkname=JavaScript%20Validation%20API)[https://www.addtoany.com/share](https://www.addtoany.com/share)