Discover How to Ensure JavaScript Form Validation

JavaScript handles data forms. Another topic to discuss is the JavaScript form validation, allowing to guarantee that specific type of data will be submitted.

This tutorial covers JavaScript methods and properties to validate user inputted data. The form validation JavaScript finds mistakes in the provided data. To increase validation requirements afterwards, read the JavaScript Regular Expressions tutorial to learn how to create your own validation patterns.

JavaScript Form Validation: Main Tips

• HTML form validation can be performed using JavaScript.
• JavaScript form validation checks the inputted information before sending it to the server.
• Usually, if the entered data is incorrect or missing, the server would need to send the request back to the user. But with JavaScript, validation proceeds on the client's computer.

Methods To Use

When using constraint validation, you can use two methods. Both of them will validate the data well, but the visitors of your website will notice the difference. Using setCustomValidity() lets you add a customized message that the user will see upon inputting data.

The example below displays a standard message if the inputted data is invalid using CheckValidity() method:

function clickFunction() {    
   var inpObj = document.getElementById("out");    
   if (inpObj.checkValidity() == false) {          	
      document.getElementById("test").innerHTML = inpObj.validationMessage;      	
   }
}

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

EXCLUSIVE: 50% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

15% OFF

Pros

• Easy to navigate
• No technical issues
• Seems to care about its users

Main Features

• Huge variety of courses
• 30-day refund policy
• Free certificates of completion

AS LOW AS 14.99$

Properties To Understand

There are three basic DOM properties used in constraint validation: validity, validationMessage, and willValidate. Let's see what each of them does:

The values validity holds are of a boolean type, meaning they can only return True or False. In the table below, you can see various properties it uses. Conditions in which they return True are listed on the right:

Validation Examples

The more examples you analyze, the better it sticks to your brain. We'll use a few more to illustrate the properties from the table we have above.

In this example, we will be using the rangeOverflow property. A message will be displayed if the input is greater than 50. It will announce Value exceeds maximum:

function clickFunction() {
    var text = "";
    if (document.getElementById("out").validity.rangeOverflow) {
        text = "Value exceeds maximum";
    } else {
        text = "Input OK";
    }
    document.getElementById("test").innerHTML = text;  
}

For an opposite purpose, rangeUnderflow property can be used. Take a look at the example below. If a user inputs a value that is less than 50, they will again see a message. This time, though, it will state Value too small:

function clickFunction() {          
   var text = "";      
   if (document.getElementById("out").validity.rangeUnderflow) {          
       text = "Value too small";      
   } else {
       text = "Input OK";
   } 
   document.getElementById("test").innerHTML = text;  
}

JavaScript Form Validation: Summary

• You can use JavaScript to validate your HTML forms before sending.
• There are several methods you can use to check validity.
• In addition to methods, you can deploy multiple properties for JavaScript form validation.