JavaScript Authentication API

Constraint Validation DOM Method

Property            Description            
checkValidity()            If the data in the input element is legal, return true, otherwise return false.            
setCustomValidity()            

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

After setting the custom prompt with setCustomValidity, validity.customError will become true, and checkValidity will always return false. If you want to re-judge and need to cancel the custom prompt, the method is as follows:                

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

If the input information is illegal in the following example, an error message will be returned:

checkValidity() Method

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

Constraint Validation DOM Attributes

Attributes            Description            
validity            Boolean attribute value, returns whether the input value is legal            
validationMessage            Browser error message            
willValidate            Specify whether the input needs to be validated            

Validity Property

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

Attribute            Description            
customError            Set to true, if custom validity information is set.            
patternMismatch            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 value.            
rangeUnderflow            Set to true, if the value of the element is less than its minimum value.            
stepMismatch            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            Set to true, if the value of the element is not the expected matching type.            
valueMissing            Set to true if the element (required attribute) has no value.            
valid            Set to true if the value of the element is legal.            

Example

If the entered value is greater than 100, a message is displayed:

rangeOverflow Attribute

<input id="id1" type="number" max="100">
<button onclick="myFunction()">Verify</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
     var txt = "";
     if (document.getElementById("id1").validity.rangeOverflow) {
        txt = "The value entered is too large";
     }
     document.getElementById("demo").innerHTML = txt;
}
</script>

 Try It! 

If the entered value is less than 100, a message is displayed:

rangeUnderflow Attribute

<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">OK</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
     var txt = "";
     var inpObj = document.getElementById("id1");
     if(!isNumeric(inpObj.value)) {
         txt = "What you entered is not a number";
     } else if (inpObj.validity.rangeUnderflow) {
         txt = "The entered value is too small";
     } else {
         txt = "Entered correctly";
     }
     document.getElementById("demo").innerHTML = txt;
}
 
// Determine whether the input is a number
function isNumeric(n) {
     return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>

 Try It!