How to Create a Form Validation in JavaScript, HTML and CSS

In this Javascript tutorial, we will learn how to create a form validation.

The script validates the name, email, and password fields, providing real-time feedback to users and preventing the submission of incomplete or incorrect data.

Project Source Code:

<!DOCTYPE html>
<html>
<head>
  <title>Form Validation</title>

  <style>
  
  *{ box-sizing: border-box; margin: 0; padding: 0; }

  #myForm{ display: flex; flex-direction: column; 
           max-width: 400px; padding: 20px;
           margin: 20px auto; border-radius: 5px; 
           font-family: 'Segoe UI', Verdana, sans-serif;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
         }

   label{ font-weight: bold; margin-bottom: 5px; color: #555; }

   input[type="text"],
   input[type="email"],
   input[type="password"]{ padding: 10px; margin-bottom: 10px; 
                           border: none; border-radius: 3px; 
                           background-color: #f2f2f2; 
                         }
    
    input[type="submit"]{ padding: 10px 20px; margin-top: 10px; 
                          border: none; border-radius: 3px; 
                          background-color: goldenrod;
                          color: #fff; cursor: pointer; 
                          transition: all 0.3s ease;
                         }

  </style>

</head>
<body>

    <form id="myForm" onsubmit="return validateForm()">
        <label>Name:</label>
        <input type="text" id="name" name="name">

        <label>Email:</label>
        <input type="text" id="email" name="email">

        <label>Password:</label>
        <input type="password" id="password" name="password">

        <input type="submit" name="submit" value="Submit">

    </form>


    <script>
    
            function validateForm(){
                
                // Get the values of the input fields
                const name = document.getElementById("name").value;
                const email = document.getElementById("email").value;
                const password = document.getElementById("password").value;

                // Check if the name field is empty
                if(name === ""){

                   alert("Name must be filled out");
                   return false;
                }
                
                // Check if the email field is empty or invalid
                if(email === ""){
 
                   alert("Email must be filled out");
                   return false;

                }

                else if(!validateEmail(email)){
                    alert("Invalid email format");
                    return false;
                }

                // Check if the password field is empty or too short
                if(password === ""){

                   alert("Password must be filled out");
                   return false;

                }

                else if(password.length < 8){

                   alert("Password must be at least 8 character");
                   return false;

                }

                // If all input fields pass validation, 
                // return true to allow the form to be submitted
                return true;

            }

            // Helper function to validate email format
            function validateEmail(email){

                 const re = /\S+@\S+\.\S+/;
                 return re.test(email);

            }
    
    </script>


</body>
</html>

Code Explanation:

JavaScript Validation:

The JavaScript script handles the form validation. It consists of a function called validateForm(), which is triggered when the form is submitted. Here's an overview of the validation steps performed:

1 - Retrieving Input Values: The function retrieves the values entered in the name, email, and password fields using the getElementById() method.

2 - Name Field Validation: It checks if the name field is empty. If it is, an alert message is displayed, and the function returns false, preventing form submission.

3 - Email Field Validation: It checks if the email field is empty or has an invalid format. If either condition is true, appropriate alert messages are displayed, and the function returns false.

4 - Password Field Validation: It checks if the password field is empty or shorter than eight characters. Similar to the previous validations, alert messages are displayed accordingly, and the function returns false.

5 - Successful Validation: If all input fields pass validation, the function returns true, allowing the form to be submitted.

OUTPUT: