Ex No: 3 BOOTSTRAP FORM VALIDATION
Aim: To create a User Registration form that uses Bootstrap Form Validation.
Procedure
Step1: Create a folder “Ex2” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Add Bootstap resource files (CSS, JS) and add necessary additional resource files in correct folders.
Step4: Use Bootstrap classes "form-group" and "form-control" to create bootstrap form elements.
Step5: Use Bootstrap classes "invalid-feedback" to show invalid elements message and "valid-feedback" to show valid elements message.
Step6: Use JQuery "load" function to check the validity of the form elements and show the feedback message.
Source Code

index.html


 <!DOCTYPE html >
 <html lang="en" >
 <head >
  <meta charset="UTF-8" >
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
  <title >Bootstrap Registration Form </title >
  <link href="css/bootstrap.min.css" rel="stylesheet" >
  <style >
 .form-container {
   max-width: 600px;
   margin: auto;
   padding: 20px;
   border-radius: 10px;
   background-color: #f8f9fa;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
  </style >
 </head >
 <body >
  <div class="container mt-5" >
   <div class="form-container" >
    <h2 class="text-center mb-4" >User Registration </h2 >
    <form id="registrationForm" novalidate >

     <div class="form-group" >
      <label for="username" >Username </label >
      <input type="text" class="form-control" id="username" required >
      <div class="invalid-feedback" >
      Please provide a username.
      </div >
     </div >
    
     <div class="form-group" >
      <label for="email" >Email address </label >
      <input type="email" class="form-control" id="email" required >
      <div class="invalid-feedback" >
      Please provide a valid email address.
      </div >
     </div >

     <div class="form-group" >
      <label for="password" >Password </label >
      <input type="password" class="form-control" id="pwd" required minlength="8" >
      <div class="invalid-feedback" >
      Please provide a password with at least 8 characters.
      </div >
      <div class="valid-feedback" >
      Valid Password.
      </div >
     </div >
    
     <div class="form-group" >
      <label for="confirmPassword" >Confirm Password </label >
      <input type="password" class="form-control" id="conpwd" required minlength="8" >
      <div class="invalid-feedback" >
      Passwords do not match.
      </div >
      <div class="valid-feedback" >
      Password Matched.
      </div >
     </div >
    
     <button type="submit" class="btn btn-primary btn-block" >Register </button >
    </form >
   </div >
  </div >
  
  <script src="js/jquery-3.5.0.min.js" > </script >
  <script src="js/popper.min.js" > </script >
  <script src="js/bootstrap.min.js" > </script >
  <script >
  $(window).on('load',function(){
  
   var form = document.getElementById('registrationForm');
   $('form').submit(function(e){
    if(form.checkValidity() == false || !validatePasswords())
    {
     e.preventDefault();
     e.stopPropagation();
    }
    form.classList.add('was-validated');
   });
   
   //function to validate password
   function validatePasswords()
   {
    var pwd = $("#pwd").val();
    var conpwd = $("#conpwd").val();
    if(pwd == conpwd)
    {
     $("#conpwd").setCustomValidity('Passwords do not match.');
     return true;
    }
    else
    {
     $("#conpwd").setCustomValidity('');
     return false;
    }
   }
  });
  </script >
 </body >
 </html >
Result: Thus a User Registration form that uses Bootstrap Form Validation is implemented.