JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
Web Form 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 consist of invalid data, show a message:
The checkValidity() Method
Example
<!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>
Output
JavaScript Validation
Enter a number and click OK:
If the number is less than 100 or greater than 300, an error message will be displayed.
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. |
If the number in an input field is greater than 100 (the input’s max attribute), display a message:
The rangeOverflow Property
Example
<!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>
Output
JavaScript Validation
Enter a number and click OK:
If the number is greater than 100 (the input's max attribute), an error message will be displayed.
If the number in an input field is less than 100 (the input’s min attribute), display a message:
The rangeUnderflow Property
Example
<!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>
Output
JavaScript Validation
Enter a number and click OK:
If the number is less than 100 (the input's min attribute), an error message will be displayed.