Easy Tutorial
Js Scope Jsref Class Extends Js Window Location Js Statements Js Variable Js Typeof Js Lib Prototype Js Cookies Javascript Json Parse Js Strict Js Json Js Conventions Js Loop For Js Function Parameters Js Htmldom Nodelist Js Objects Met Win Postmessage Js Comparisons Js Datatypes Jsref Split Js Ex Objects Js Function Js Chrome Js Async Js Obj String Js Obj Regexp Js Validation Api Js Htmldom Elements Js Form Validation Jsref Obj Array Js Function Closures Jsref Class Super Js Void Js Comments Js Object Prototype Js Ex Browser Js Class Inheritance Js Obj Date Js Summary Js If Else Js Htmldom Html Js Window History Jsref Regexp G Js Syntax Js Obj Math Js Loop While Js Window Jsref Obj Date Js Lib Jquery Js Examples Js Variables Js Switch Js Operators Js Obj Intro Js Break Js Obj Number Jsref Regexp I Js Let Const Js Htmldom Eventlistener Js Obj Array Js Timing Js Errors Jsref Replace Js Mistakes Js Htmldom Js Validation Js Tutorial Js Promise Js Function Invocation Js Reserved Js Htmldom Events Js Ex Dom Jsref Search Js Obj Boolean Js Output Js Libraries Jsref Match Js Htmldom Css Js Regexp Js Type Conversion Js Htmldom Collections Js Function Definition Js Events Js Class Intro Javascript Async Jsref Constructor Class Js Debugging Js Functions Js This Js Window Screen Js Howto Javascript Json Stringify Js Intro Jsref Class Static Js Window Navigator Obj Window Js Class Static Js Strings Index Js Popup Js Hoisting
❮ Js Obj Regexp Js Htmldom Elements ❯

JavaScript Validation API

Constraint Validation DOM Methods

Property Description
checkValidity() Returns true if the input element contains valid data; otherwise, returns false.
setCustomValidity() Sets the validationMessage property of the input element, used for custom error messages. Once a custom message is set using setCustomValidity, validity.customError becomes true, and checkValidity always returns false. To re-evaluate, clear the custom message using: setCustomValidity('') <br>setCustomValidity(null) <br>setCustomValidity(undefined)

The following example returns an error message if the input is invalid:

checkValidity() Method

&lt;input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">Validate</button>

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

<script>function myFunction() {
    var inpObj = document.getElementById("id1");
    if (!inpObj.checkValidity()) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}</script>

Constraint Validation DOM Properties

Property Description
validity Boolean value indicating whether the input is valid.
validationMessage The browser's error message.
willValidate Specifies whether the input needs to be validated.

Validity Properties

The validity property of the input element contains several validity data properties:

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

Example

If the input value is greater than 100, display a message:

rangeOverflow Property

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

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

<script>function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
       txt = "Input value is too large";
    }
    document.getElementById("demo").innerHTML = txt;
}</script>

If the input value is less than 100, display a message:

rangeUnderflow Property

&lt;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 = "You did not enter a number";
    } else if (inpObj.validity.rangeUnderflow) {
        txt = "Input value is too small";
    } else {
        txt = "Input correct";
    }
    document.getElementById("demo").innerHTML = txt;
}

// Check if input is a number
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}</script>
❮ Js Obj Regexp Js Htmldom Elements ❯