Web Forms API

Constraint Validation DOM Methods

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

If an input field has invalid data, show a message.

The checkValidity() Method

<input id=”id1″ type=”number” min=”100″ max=”300″ required>
<button onclick=”myFunction()”>OK</button>

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

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

Constraint Validation DOM Properties

Property	Description
validity	Includes boolean properties that indicate the validity of an input element.
validationMessage	Holds the message that the browser will display when the validity is false.
willValidate	Indicates whether an input element will undergo validation.

Validity Properties

The validity property of an input element includes several properties that relate to the validity of the data.

Property	Description
customError	Set to true if a custom validity message has been specified.
patternMismatch	Set to true if the element’s value does not conform to its pattern attribute.
rangeOverflow	Set to true if an element’s value exceeds 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 according to 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 according to 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 exceeds 100 (the input’s max attribute), display a message.

The rangeOverflow Property

<input id=”id1″ type=”number” max=”100″>
<button onclick=”myFunction()”>OK</button>

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

<script>
function myFunction() {
  let text = “Value OK”;
  if (document.getElementById(“id1”).validity.rangeOverflow) {
    text = “Value too large”;
}
}
</script>

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

The rangeUnderflow Property

<input id=”id1″ type=”number” min=”100″>
<button onclick=”myFunction()”>OK</button>

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

<script>
function myFunction() {
  let text = “Value OK”;
  if (document.getElementById(“id1”).validity.rangeUnderflow) {
    text = “Value too small”;
  }
}
</script>