Property | Description |
---|---|
checkValidity() | if an input field contains valid value than it returns true, otherwise false. |
setCustomValidity() | Customize the validationMessage property of an input field. |
Below example displays an error message if input field contains invalid value.
<!DOCTYPE html>
<html>
<body>
<p>Enter Price between 100 to 3000.</p>
<input id="price" type="number" min="100" max="3000" required>
<button onclick="validateInput()">OK</button>
<p id="message"></p>
<script>
function validateInput() {
var inpObj = document.getElementById("price");
if (inpObj.checkValidity() == false) {
document.getElementById("message").innerHTML = inpObj.validationMessage;
}
}
</script>
</body>
</html>
To change default error message, you can use setCustomValidity() method.
<!DOCTYPE html>
<html>
<body>
<p>Enter Price between 100 to 3000.</p>
<input id="price" type="number" min="100" max="3000" required>
<button onclick="validateInput()">OK</button>
<p id="message"></p>
<script>
function validateInput() {
var inpObj = document.getElementById("price");
inpObj.setCustomValidity('Price must be between 100 and 3000');
if (inpObj.checkValidity() == false) {
document.getElementById("message").innerHTML = inpObj.validationMessage;
}
}
</script>
</body>
</html>
Property | Description |
---|---|
validity | Boolean properties, based on validity of input element |
validationMessage | The message a browser will display when the validity property is false. |
willValidate | Returns whether an element will successfully validate based on forms validation rules and constraints. |
Validity property of an input element contains number of different properties relate to validity of data.
Property | Description |
---|---|
customError | true if a custom validity message is set otherwise false. |
patternMismatch | true if an element’s value does not match its pattern attribute otherwise false. |
rangeOverflow | true if an element’s value is greater than its max attribute otherwise false. |
rangeUnderflow | true if an element’s value is less than its min attribute otherwise false. |
stepMismatch | true if an element’s value is invalid per its step attribute otherwise false. |
tooLong | true if an element’s value exceeds its maxLength attribute otherwise false. |
typeMismatch | Set to true, if an element’s value is invalid per its type attribute. |
valueMissing | true if an element (with a required attribute) has no value otherwise false. |
valid | true if an element’s value is valid otherwise false. |
<!DOCTYPE html>
<html>
<body>
<p>Enter Price below 100 to show error message.</p>
<input id="price" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="error"></p>
<script>
function checkPrice() {
var txt = "";
if (document.getElementById("price").validity.rangeUnderflow) {
txt = "Price is lower than minimum allowed 100.";
}
document.getElementById("error").innerHTML = txt;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Enter Price above 100 to show error message.</p>
<input id="price" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="error">>/p>
<script>
function checkPrice() {
var txt = "";
if (document.getElementById("price").validity.rangeOverflow) {
txt = "Price is greater than maximum allowed 100.";
}
document.getElementById("error").innerHTML = txt;
}
</script>
</body>
</html>