WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript Validation API

Constrained DOM method

Property Description
checkValidity () Returns true if the data in the input element is valid, otherwise returns false.
setCustomValidity ()

Set the validationMessage attribute of the input element to customize the method of the error message.

After setting a custom prompt using setCustomValidity, validity.customError will become true, and checkValidity will always return false. If you want to judge again, you need to cancel the custom prompt, as follows:

  setCustomValidity   (  ''  )  
setCustomValidity   (  null  )  
setCustomValidity   (  undefined  )  

If an input field contains invalid data, display a message:

The checkValidity() Method

<input id="id1" type="number" min="100" max="300">
<button onclick="myFunction()">OK</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 Yourself »

Constrained validation DOM attributes

Attribute Description
validity Boolean attribute value, returns whether input value is valid
validationMessage Browser error message
willValidate Specify whether input needs to be verified

Validity Properties

The validity attribute of the input element contains a series of validity data attributes:

Attribute Description
customError Set to true if custom validity information is set.
patternMismatch is set to true if the value of the element does not match its pattern attribute.
rangeOverflow Set to true if the value of the element is greater than the set maximum.
rangeUnderflow is set to true if the value of the element is less than its minimum value.
stepMismatch is set to true if the value of the element is not set according to the specified step attribute.
tooLong Set to true if the value of the element exceeds the length set by the maxLength attribute.
typeMismatch is set to true if the value of the element is not the type expected to match.
valueMissing Set to true if the element (required attribute) has no value.
valid Set to true if the value of the element is valid.

Examples

If the number in an info field is more noteworthy than 100 (the information's maximum quality), show a message:

The rangeOverflow Property

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
work myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
       txt = "Value too large";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>
Try it Yourself »

If the number in an information field is under 100 (the info's min quality), show a message:

The rangeUnderflow Property

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeUnderflow) {
       txt = "Value too small";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>
Try it Yourself »