JavaScript Tutorial

This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

Forms API
Web Forms API
JavaScript Forms API is a web API that allows us to interact with and manipulate HTML forms. It provides a set of methods and properties that are used to perform client-side form validation. It’s also helpful to ensure data integrity before form submission. The forms API also referred to as Form Validation API or Constraint Validation API.
Here, we will discuss how to use various methods and properties to validate the form data using JavaScript.
Constraint Validation DOM Methods
In JavaScript, the constraint validation DOM method validates the input value by referencing the input fields. It validates the input value based on the HTML attributes you have used with the input.
After validating the input value, it returns a boolean value, representing whether the input value is valid.
Here is the list of the constraint validation methods.
Method
Description
checkValidity()
It returns a boolean value based on whether the input element contains a valid value.
setCustomValidity()
It is used to set the custom message to the validationMessage property.
Syntax
We can follow the syntax below to use the form validation methods.
element.checkValidity()
OR
element.setCustomValidity(message);
In the above syntax, you need to access the element using the selector and take it as a reference of the checkValidity() or setCustomValidity() method. The setCustomValidity() method takes the string message as an argument.
Example: Using the checkValidity() method
We created the number input in the code below and set 10 to the min attribute.
In the validateInput() function, we access the number input using the id and use the checkValidity() to validate the value of the number input.
If checkValidity() method returns false, we print the validation message. Otherwise, we print the numeric value.
<html>
<body>
   <input type = "number" min = "10" id = "num" required>
   <p id = "output"> </p>
   <button onclick = "validateInput()"> Validate Number </button>
   <script>
      const output = document.getElementById("output");
      function validateInput() {
         let num = document.getElementById("num");
         if (num.checkValidity() == false) {
            output.innerHTML = "Please enter a number greater than 10";
         } else {
            output.innerHTML = "Your number is " + num.value;
         }
      }
   </script>
</body>
</html>
Example: Using the setCustomValidity() Method
In the below code, we have defined the number input to take the user’s age in the input.
In the validateAge() function, we access the age input using its id and perform the custom validation on the input value. Based on the validation, we use the setCustomValidity() to set the custom validation message.
At last, we use the reportValidity() method to show the validation message set using the setCustomValidity() method.
You can enter the age below 18, and observe the validation message.
<html>
<body>
   <form>
      <label> Enter your age: </label>
      <input type = "number" id = "age" required> <br> <br>
      <button type = "button" onclick = "validateAge()"> Validate Age </button>
   </form>
   <div id = "message"> </div>
   <script>
      function validateAge() {
         const ageInp = document.getElementById("age");
         const output = document.getElementById("message");
         const age = parseInt(ageInp.value);
         if (isNaN(age)) {
            ageInp.setCustomValidity("Please enter a valid number.");
         } else if (age < 18) {
            ageInp.setCustomValidity("You must be at least 18 years old.");
         } else {
            ageInp.setCustomValidity(""); // To remove custom error message
            output.innerHTML = "Age is valid!";
         }
﻿
         ageInp.reportValidity(); // To display custom validation message
      }
   </script>
</body>
</html>
Constraint Validation DOM Properties
JavaScript also contains the DOM properties for constraint validation. It is used to check the particular validation of the input value.
Here, we have listed all DOM properties that can be used for the constraint validation.
Property
Description
validity
It contains multiple properties to perform the particular validation on the input element.
validationMessage
It contains the validation message when the input element doesn't contain valid data.
willValidate
It represents whether the input data will be validated.
Properties of the 'validity' Property
In JavaScript, each element has the 'validity' property, containing multiple properties. You can use the particular property of the 'validation' property to perform the validation.
Here, we have listed all properties of the 'validity' property.
Property
Description
customError
It contains a true boolean value when you set the custom validity message.
patternMismatch
When the parent element's value doesn't match the pattern, it sets true.
rangeOverflow
It returns a boolean value based on whether the input value is greater than the max attribute's value.
rangeUnderflow
It returns a boolean value based on whether the input value is less than the min attribute's value.
stepMismatch
It returns a boolean value based on whether the step is mismatching in the numeric input.
tooLong
If the length of the input element's value is greater than the maxLength attribute's value, it returns true. Otherwise, it returns false.
typeMismatch
When the type of entered value doesn't match the 'type' attribute's value, it returns true.
valueMissing
It returns a boolean value based on whether the input element is empty.
valid
It returns true when the input element is valid.
Syntax
Users can follow the syntax below to use the properties of the validation property.
element.validity.property;
You can use the different properties of the validity property of the element to validate the input element’s value.
Example
In the below code, we have defined the number input and set 300 for the value of the ‘max’ attribute.
In the validateNumber() function, we use the ‘rangeOverflow’ property of the ‘validity’ property of the input element to check whether the input value is greater than 300.
If the rangeOverflow property returns true, we print the ‘Number is too large’. Otherwise, we print the numeric value.
<html>
<body>
   <form>
      <label> Enter Any Number: </label>
      <input type = "number" id = "num" max = "300" required> <br> <br>
      <button type = "button" onclick = "validateNumber()"> Validate Number </button>
   </form>
   <div id = "output"> </div>
   <script>
      const output = document.getElementById('output');
      function validateNumber() {
         const numInput = document.getElementById('num');
         if (numInput.validity.rangeOverflow) {
            output.innerHTML = "Number is too large";
         } else {
            output.innerHTML = "Number is valid";
         }
      }
   </script>
  </body>
</html>
Example
In the below code, we have defined the text input.
In the validateText() function, we access the string input. After that, we used the ‘valueMissing’ property of the validity property to check whether the input value is empty.
In the output, you can keep the input value empty, click the validate text button and observe the error message.
﻿
<html>
<body>
   <form>
      <label> Enter any text: </label>
      <input type = "text" id = "str" required> <br> <br>
      <button type = "button" onclick = "validateText()"> Validate Text </button>
   </form>
   <div id = "output"> </div>
   <script>
      const output = document.getElementById('output');
      function validateText() {
         const strInput = document.getElementById('str');
         if (strInput.validity.valueMissing) {
            output.innerHTML = "Please enter a value.";
         } else {
            output.innerHTML = "You have entered " + strInput.value + ".";
         }
      }
   </script>
</body>
</html>
You can also use the other properties of the ‘validity’ property to validate the form input data. If the data is not valid, you can show the custom error message using the setCustomValidity() method.
﻿
﻿
﻿
﻿

Method	Description
`checkValidity()`	It returns a boolean value based on whether the input element contains a valid value.
`setCustomValidity()`	It is used to set the custom message to the validationMessage property.

Property	Description
validity	It contains multiple properties to perform the particular validation on the input element.
validationMessage	It contains the validation message when the input element doesn't contain valid data.
willValidate	It represents whether the input data will be validated.

Property	Description
customError	It contains a true boolean value when you set the custom validity message.
patternMismatch	When the parent element's value doesn't match the pattern, it sets true.
rangeOverflow	It returns a boolean value based on whether the input value is greater than the max attribute's value.
rangeUnderflow	It returns a boolean value based on whether the input value is less than the min attribute's value.
stepMismatch	It returns a boolean value based on whether the step is mismatching in the numeric input.
tooLong	If the length of the input element's value is greater than the maxLength attribute's value, it returns true. Otherwise, it returns false.
typeMismatch	When the type of entered value doesn't match the 'type' attribute's value, it returns true.
valueMissing	It returns a boolean value based on whether the input element is empty.
valid	It returns true when the input element is valid.

Javascript Basics

JavaScript Operators

JavaScript Control Flow

JavaScript Functions

JavaScript Objects

Object Oriented JavaScript

JavaScript Versions

JavaScript Cookies

JavaScript Browser BOM

JavaScript Web APIs

JavaScript Events

JavaScript Tutorial

Forms API

Web Forms API

Constraint Validation DOM Methods

Syntax

Example: Using the checkValidity() method

Example: Using the setCustomValidity() Method

Constraint Validation DOM Properties

Properties of the 'validity' Property

Syntax

Example

Example