Forms API

JavaScript Forms API – JavaScript Validation Methods

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>

Download the code Run the code

To change default error message, you can use setCustomValidity() method.

For example

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

Download the code Run the code

Validation DOM properties

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 DOM Property

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.

Example of rangeUnderflow Property

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

Download the code Run the code

Example of rangeOverflow Property

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

Download the code Run the code

<<< JavaScript Form ValidationJavaScript Objects Definition >>>