JavaScript Validation API
Constraint Validation DOM Methods
| Property | Description |
|---|---|
| checkValidity() | If the data in the input element is valid, returns true; otherwise, returns false. |
| setCustomValidity() | Sets the validationMessage property of the input element, a method used to customize error prompt messages. After setting a custom prompt with setCustomValidity, validity.customError becomes true, and checkValidity always returns false. To re-validate, you need to cancel the custom prompt as follows:
setCustomValidity('')
setCustomValidity(null)
setCustomValidity(undefined)
|
The following example returns an error message if the input information is invalid:
checkValidity() Method
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">Validate</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script>
Try it »
Constraint Validation DOM Properties
| Property | Description |
|---|---|
| validity | A Boolean attribute value; returns whether the input value is valid. |
| validationMessage | Browser error message |
| willValidate | Specifies whether the input needs validation |
Validity Properties
The input element'svalidity propertyContains a series of validity data attributes:
| Property | Description |
|---|---|
| customError | Set to true if custom validity information is set. |
| patternMismatch | Set to true if the element's value does not match its pattern attribute. |
| rangeOverflow | Set to true if the element's value is greater than the set maximum. |
| rangeUnderflow | Set to true if the element's value is less than its minimum. |
| stepMismatch | Set to true if the element's value is not set according to the specified step attribute. |
| tooLong | Set to true if the element's value exceeds the length set by the maxLength attribute. |
| typeMismatch | Set to true if the element's value does not match the expected type. |
| valueMissing | Set to true if the element (required attribute) has no value. |
| valid | Set to true if the element's value is valid. |
Examples
If the entered value is greater than 100, display a message:
rangeOverflow Property
<input id="id1" type="number" max="100">
<button onclick="myFunction()">Validate</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "The entered value is too large";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Try it »
If the entered value is less than 100, display a message:
rangeUnderflow Property
<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
var inpObj = document.getElementById("id1");
if(!isNumeric(inpObj.value)) {
txt = "What you entered is not a number";
} else if (inpObj.validity.rangeUnderflow) {
txt = "The entered value is too small";
} else {
txt = "Input is correct";
}
document.getElementById("demo").innerHTML = txt;
}
//Check whether the input is a number
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
Try it »