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 >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .