Animations

API

Arrays

Async

Basics

Challenges

Classes

Console

Dates

Debugging

DOM Elements

DOM Methods

DOM Navigation

DOM Properties

Event Listeners

Flow Control

Forms

Functions

Global Functions

JSON

Keywords

Libraries (3rd party)

Math

Modules

Objects

Snippets

String

Types

Widgets

Window Object

JavaScript - Validation API Example

You also chose to use some of the validity properties to test against.

  • 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.

For example, here's how we can use a rangeUnderflow property:

Enter a number higher than 99.

 



function myFunction2()
{
    let input = document.getElementById("txtNumber2");
    let msg = "Number is too low.";

    if (input.validity.rangeUnderflow)
    {
        document.getElementById("demo1").innerHTML = msg;
    }
}