Client-side form validation

JavaScript Validation API

Method Description

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

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.

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