Ex No: 6 FORM VALIDATION
Aim: To write a JavaScript code to perfrom Form Validation.
Algorithm
Step1: Create a folder “Ex6” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Use document.getElementById to get value of input elements.
Step4: Use addEventListener method to add an event to handle Form Submittion.
Step5: Check the input is not empty and has correct values. Else display error message.
Source Code
Try It

index.html


<!DOCTYPE html>
<html>
   <head>
      <title>Form Validation</title>   
   <style>
     header {
      text-align:center;
      height: 100px;
      background-color: Chocolate;
      padding: 10px;
      border-radius: 10px 10px 0px 0px;
     }
     footer {
      text-align:center;
      font-size: 12px;
      height: 50px;
      line-height: 50px;
      background-color: Chocolate;
      padding: 10px;
      border-radius: 10px;
     }
     .error{
      color:red;
     }
     .errorelm{
      border-color: red;
      border-radius: 10px;
      border-style: solid 2px;
     }
   </style>
   </head>
   <body>      
      <header>
         <h1>User Registration Form</h1>
      </header>   
      <hr>
      <form id="usrRegForm">
         <table>
           <tr>
            <td><label for="txtusr">Username:</label></td>
            <td>
               <input type="text" id="txtusr" name="txtusr">
               <span id="usrerror" class="error"></span>
            </td>
           </tr>
           <tr>
            <td><label for="txtpwd">Password:</label></td>
            <td>
               <input type="text" id="txtpwd" name="txtpwd">
               <span id="pwderror" class="error"></span>
            </td>
           </tr>
           <tr>
            <td><label for="txtcnfpwd">Confirm Password:</label></td>
            <td>
               <input type="password" id="txtcnfpwd" name="txtcnfpwd">
               <span id="cnfpwderror" class="error"></span>
            </td>
           </tr>
           <tr>
            <td><label for="txtemail">Email:</label></td>
            <td>
               <input type="text" id="txtemail" name="txtemail">
               <span id="emailerror" class="error"></span>
            </td>
           </tr>
           <tr>
            <td><input type="submit" value="Register"></td>
            </tr>
         </table>
      </form>
      <footer>
         Developed by K Anbarasan
      </footer>      
      <script type="text/javascript">
         document.getElementById("usrRegForm").addEventListener('submit', function(event){
            event.preventDefault();
            clearErrors();
            let usrname = document.getElementById("txtusr").value;
            let pwd = document.getElementById("txtpwd").value;
            let cnfpwd = document.getElementById("txtcnfpwd").value;
            let email = document.getElementById("txtemail").value;
            let formValid = true;
            let emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
            
            if(usrname == "")
            {
               displayError("usrerror","Enter User Name");
               formValid = false;
            }
            
            if(pwd == "")
            {
               displayError("pwderror","Enter Password");
               formValid = false;               
            }
            
            if(cnfpwd == "")
            {
               displayError("cnfpwderror","Enter Confirm Password");
               formValid = false;               
            }else if( pwd !== cnfpwd)
            {
               displayError("cnfpwderror","Password Not Matching");
               formValid = false;               
            }
            
            if(!emailRegex.test(email))
            {
               displayError("emailerror","Enter Valid Email");
               formValid = false;               
            }
            
            if(formValid)
            {
               alert("Form Submitted Successfully");
            }
         });//End of Event Listener
         
         function displayError(id, message) {
            document.getElementById(id).textContent = message;
         }

         function clearErrors() {
            var errors = document.querySelectorAll('.error');
            
            errors.forEach(function(error) {
               error.textContent = '';
            });
         }

      </script>
   </body>
</html>
Result: Thus JavaScript code is written to perform Form Validation.