Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

ValidityState object

The ValidityState object is returned by the validity attribute and provides attributes to describe the state of validation on an element, such as a missing value, a type mismatch, or that the user's input is valid.

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.10.21.3Internet Explorer 10

Syntax


 oValidityState = oInputfield.validity; 

DOM Information

Inheritance Hierarchy

The ValidityState does not inherit from any class or interface.

Members

The ValidityState object has these types of members:

Properties

The ValidityState object has these properties.

PropertyAccess typeDescription

customError

Read-only

Returns whether the input field has raised a custom error.

patternMismatch

Read-only

Returns whether the input field value does not match the rules defined by the pattern attribute.

rangeOverflow

Read-only

Returns whether a value is greater than the max attribute on an input control.

rangeUnderflow

Read-only

A value is less than the min attribute on an input control.

stepMismatch

Read-only

Returns whether the input field value does not fit the rules given by the step attribute.

tooLong

Read-only

Returns whether an input field's value is longer than is allowed by the maxlength attribute.

typeMismatch

Read-only

Returns whether the input field value is not the correct syntax.

valid

Read-only

Returns whether the input field value has any validity errors.

valueMissing

Read-only

Returns whether a value has not been entered in an input field that is required.

 

Standards information

Remarks

The following example displays all validation states for a validated field.

Examples


<!DOCTYPE html >
<html>
<head>
    <title>Valid states example</title>
    <script type="text/javascript">
        function getState() {
            var oState = document.getElementById("myField");
            var myState = oState.validity;
            var display = document.getElementById("showState");
            display.innerHTML = "";
            for (var t in myState) {
                display.innerHTML += (t + ": " + myState[t] + "<br/>");    //loop through attributes
            }
        }
    </script>
</head>
<body onload="getState();">
<h1>ValidState test</h1>
<div>The required text field only takes numbers between 4 and 20 in even increments. <br /><br />
Try different numbers to see how the validityState attributes react.</div>
<br />
<div><label>Enter a number from 4 to 20: 
<input id="myField" type="number" required  min="4" max ="20" step="2" />
<button onclick="getState();">Check state</button></label></div>

<div id="showState"></div>

</body>
</html>


 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.