Client Side JavaScript Form Validation

In modern web development, form validation is essential for maintaining data quality and improving user experience. Client-side form validation uses JavaScript to check input fields in a web form before the data is sent to the server. This helps users correct mistakes immediately, reducing server load and improving responsiveness.

Client Side JavaScript Form Validation

Getting Started

JavaScript form validation ensures that users fill out a form correctly before submitting it. It can be used to check required fields, formats (like email addresses or phone numbers), and other constraints such as minimum or maximum values.

Why Client-Side Validation?

Client-side validation is not a substitute for server-side validation but complements it. Here’s why it’s useful:

Immediate feedback: Users are alerted to errors instantly.
Reduced server traffic: Invalid data is caught early, avoiding unnecessary server requests.
Improved user experience: Helps users submit correct data with minimal frustration.

The following are examples of web form validation in JavaScript, which includes three fields to validate before submitting the form: first name, email, and age. Each field has a corresponding error message span element, which will display the error text if the validation fails.

HTML Form Code


<!DOCTYPE html>   
  <html lang="en">   
  <head>   
   <meta charset="UTF-8">   
   <meta name="viewport" content="width=device-width, initial-scale=1.0">   
   <title>Form Validation Example</title>   
   <style>   
    .error { color: red; font-size: 12px; }   
   </style>   
  </head>   
  <body>   
   <h2>Registration Form</h2>   
   <form id="myForm" name="myForm" onsubmit="return validateForm()">   
    <label for="fname">First Name:</label>   
    <input type="text" id="fname" name="fname">   
    <span id="fnameError" class="error"></span><br><br>   
    <label for="email">Email:</label>   
    <input type="text" id="email" name="email">   
    <span id="emailError" class="error"></span><br><br>   
    <label for="age">Age:</label>   
    <input type="number" id="age" name="age">   
    <span id="ageError" class="error"></span><br><br>   
    <input type="submit" value="Submit">   
   </form>   
  </body>

JavaScript Validation Code

 function validateForm() {   
     // Clear previous error messages   
     document.getElementById("fnameError").innerText = "";   
     document.getElementById("emailError").innerText = "";   
     document.getElementById("ageError").innerText = "";   
     let isValid = true;   
     // Get form values   
     const fname = document.forms["myForm"]["fname"].value;   
     const email = document.forms["myForm"]["email"].value;   
     const age = document.forms["myForm"]["age"].value;   
     // Validate First Name   
     if (fname === "") {   
      document.getElementById("fnameError").innerText = "First name is required.";   
      isValid = false;   
     }   
     // Validate Email   
     const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;   
     if (email === "") {   
      document.getElementById("emailError").innerText = "Email is required.";   
      isValid = false;   
     } else if (!email.match(emailPattern)) {   
      document.getElementById("emailError").innerText = "Please enter a valid email address.";   
      isValid = false;   
     }   
     // Validate Age   
     if (age === "" || age < 18 || age > 100) {   
      document.getElementById("ageError").innerText = "Please enter a valid age between 18 and 100.";   
      isValid = false;   
     }   
     return isValid;   
    }

HTML Code After Apply Javascript Validation

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Form Validation Example</title>  
   <style>  
     .error { color: red; font-size: 12px; }  
   </style>  
 </head>  
 <body>  
   <h2>Registration Form</h2>  
   <form id="myForm" name="myForm" onsubmit="return validateForm()">  
     <label for="fname">First Name:</label>  
     <input type="text" id="fname" name="fname">  
     <span id="fnameError" class="error"></span><br><br>  
     <label for="email">Email:</label>  
     <input type="text" id="email" name="email">  
     <span id="emailError" class="error"></span><br><br>  
     <label for="age">Age:</label>  
     <input type="number" id="age" name="age">  
     <span id="ageError" class="error"></span><br><br>  
     <input type="submit" value="Submit">  
   </form>  
   <script>  
     function validateForm() {  
       // Clear previous error messages  
       document.getElementById("fnameError").innerText = "";  
       document.getElementById("emailError").innerText = "";  
       document.getElementById("ageError").innerText = "";  
       let isValid = true;  
       // Get form values  
       const fname = document.forms["myForm"]["fname"].value;  
       const email = document.forms["myForm"]["email"].value;  
       const age = document.forms["myForm"]["age"].value;  
       // Validate First Name  
       if (fname === "") {  
         document.getElementById("fnameError").innerText = "First name is required.";  
         isValid = false;  
       }  
       // Validate Email  
       const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;  
       if (email === "") {  
         document.getElementById("emailError").innerText = "Email is required.";  
         isValid = false;  
       } else if (!email.match(emailPattern)) {  
         document.getElementById("emailError").innerText = "Please enter a valid email address.";  
         isValid = false;  
       }  
       // Validate Age  
       if (age === "" || age < 18 || age > 100) {  
         document.getElementById("ageError").innerText = "Please enter a valid age between 18 and 100.";  
         isValid = false;  
       }  
       return isValid;  
     }  
   </script>  
 </body>  
</html>

Basic Form Validation Using Javascript

Explanation:

Form Structure:
- The form has three fields: First Name, Email, and Age.
- Each field has a corresponding error message span element, which will display the error text if the validation fails.
JavaScript Function (validateForm):
- The validateForm() function is called when the form is submitted (onsubmit="return validateForm()").
- It checks the values entered by the user for each field and performs the following validations:
  - First Name: Must not be empty.
  - Email: Must not be empty and must match a regular expression for a valid email format.
  - Age: Must be between 18 and 100.
Error Handling:
- If a field is invalid, an error message is displayed next to the field, and the form will not be submitted (return false).
- If all fields are valid, the form is submitted (return true).

Customizing the Javascript Validation:

You can modify this validation code based on your specific needs, such as adding more fields, using different validation rules (like minimum length for text fields), or validating other formats (like phone numbers or dates).

Best Practices:

Client-side validation improves user experience by giving immediate feedback.
Server-side validation is essential to protect against invalid or malicious data, even if JavaScript validation passes.

Summary

Client-side JavaScript form validation enhances user interaction and helps maintain data integrity. While it improves user experience, it should always be paired with secure server-side validation to protect against malicious input. By balancing both client and server validation, you can build reliable and user-friendly web forms.

Thanks

Client Side JavaScript Form Validation