JS Web APIsLesson #193

JavaScript Validation API

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

Constraint Validation DOM Methods

Property	Description
checkValidity()	Returns true if an input element contains valid data.
setCustomValidity()	Sets the validationMessage property of an input element.

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

The checkValidity() Method

Example Code

html

Try it Yourself

OK

 function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;

    }
}

Constraint Validation DOM Properties

Property	Description
validity	Contains boolean properties related to the validity of an input element.
validationMessage	Contains the message a browser will display when the validity is false.
willValidate	Indicates if an input element will be validated.

Validity Properties

The validity property of an input element contains a number of properties related to the validity of data:

Property	Description
customError	Set to true, if a custom validity message is set.
patternMismatch	Set to true, if an element's value does not match its pattern attribute.
rangeOverflow	Set to true, if an element's value is greater than its max attribute.
rangeUnderflow	Set to true, if an element's value is less than its min attribute.
stepMismatch	Set to true, if an element's value is invalid per its step attribute.
tooLong	Set to true, if an element's value exceeds its maxLength attribute.
typeMismatch	Set to true, if an element's value is invalid per its type attribute.
valueMissing	Set to true, if an element (with a required attribute) has no value.
valid	Set to true, if an element's value is valid.

Examples

If the number in an input field is greater than 100 (the input's max attribute), display a message:

The rangeOverflow Property

Example Code

html

Try it Yourself

OK

function myFunction() {
  let text = "Value OK";

    if (document.getElementById("id1").validity.rangeOverflow) {

      text = "Value too large";

    }

}

If the number in an input field is less than 100 (the input's min attribute), display a message:

The rangeUnderflow Property

Example Code

html

Try it Yourself

OK

function myFunction() {
  let text = "Value OK";

    if (document.getElementById("id1").validity.rangeUnderflow) {

      text = "Value too small";

    }

}

Interactive Code Examples

The checkValidity() Method

html

Try it Yourself

Interactive runnable JavaScript example from EA Academy.

Live Output Preview:

The rangeOverflow Property

html

Try it Yourself

Interactive runnable JavaScript example from EA Academy.

Live Output Preview:

The rangeUnderflow Property

html

Try it Yourself

Interactive runnable JavaScript example from EA Academy.

Live Output Preview:

Previous: Web Storage API Next: Web Workers API