Web Form API

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

Web Form API

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 consist of invalid data, show a message:

The checkValidity() Method

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id=”id1″ type=”number” min=”100″ max=”300″ required>

<button onclick=”myFunction()”>OK</button>

<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>

<p id=”demo”></p>

<script>

function myFunction() {

const inpObj = document.getElementById(“id1”);

if (!inpObj.checkValidity()) {

document.getElementById(“demo”).innerHTML = inpObj.validationMessage;

  } else {

    document.getElementById(“demo”).innerHTML = “Input OK”;

  }

}

</script>

</body>

</html>

Output

JavaScript Validation

Enter a number and click OK:

If the number is less than 100 or greater than 300, an error message will be displayed.

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.

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

The rangeOverflow Property

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id=”id1″ type=”number” max=”100″>

<button onclick=”myFunction()”>OK</button>

<p>If the number is greater than 100 (the input’s max attribute), an error message will be displayed.</p>

<p id=”demo”></p>

<script>

function myFunction() {

  let text;

 if (document.getElementById(“id1”).validity.rangeOverflow) {

    text = “Value too large”;

  } else {

    text = “Input OK”;

  }

document.getElementById(“demo”).innerHTML = text;

}

</script>

</body>

</html>

Output

JavaScript Validation

Enter a number and click OK:

If the number is greater than 100 (the input's max attribute), an error message will be displayed.

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

The rangeUnderflow Property

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id=”id1″ type=”number” min=”100″>

<button onclick=”myFunction()”>OK</button>

<p>If the number is less than 100 (the input’s min attribute), an error message will be displayed.</p>

<p id=”demo”></p>

<script>

function myFunction() {

  let text;

  if (document.getElementById(“id1”).validity.rangeUnderflow) {

    text = “Value too small”;

  } else {

    text = “Input OK”;

  }

 document.getElementById(“demo”).innerHTML = text;

}

</script>

</body>

</html>

 

Output

JavaScript Validation

Enter a number and click OK:

If the number is less than 100 (the input's min attribute), an error message will be displayed.