API tools faq
paste
Advertisement
Guest User

HTML Form Validate

a guest
Dec 12th, 2019
258
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Form Validation</title>
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  6.  
  7. <!-- jQuery library -->
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  9.  
  10. <!-- Popper JS -->
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  12.  
  13. <!-- Latest compiled JavaScript -->
  14. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  15. </head>
  16.  
  17. <body>
  18. <h1 class="text-white text-center font-weight-bold bg-success" style="font-size: 55px;"> Complete Form Validation In JavaScript </h1>
  19.     <div class="container"><br>
  20.         <div class="col-lg-6 m-auto d-block">
  21.             <form action="#" onsubmit="return validation()" class="bg-light">
  22.                 <div class="form-group">
  23.                     <label for="user" class="font-weight-bold"> Username: </label>
  24.                     <input type="text" name="user" class="form-control" id="user" autocomplete="off">
  25.                     <span id="username" class="text-danger font-weight-bold"> </span>
  26.                 </div>
  27.  
  28.                 <div class="form-group">
  29.                     <label class="font-weight-bold"> Password: </label>
  30.                     <input type="text" name="pass" class="form-control" id="pass" autocomplete="off">
  31.                     <span id="passwords" class="text-danger font-weight-bold"> </span>
  32.                 </div>
  33.  
  34.                 <div class="form-group">
  35.                     <label class="font-weight-bold"> Confirm Password: </label>
  36.                     <input type="text" name="conpass" class="form-control" id="conpass" autocomplete="off">
  37.                     <span id="confrmpass" class="text-danger font-weight-bold"> </span>
  38.                 </div>
  39.  
  40.                 <div class="form-group">
  41.                     <label class="font-weight-bold"> Mobile Number: </label>
  42.                     <input type="text" name="mobile" class="form-control" id="mobileNumber" autocomplete="off">
  43.                     <span id="mobileno" class="text-danger font-weight-bold"> </span>
  44.                 </div>
  45.  
  46.                 <div class="form-group">
  47.                     <label class="font-weight-bold"> Email: </label>
  48.                     <input type="text" name="email" class="form-control" id="emails" autocomplete="off">
  49.                     <span id="emailids" class="text-danger font-weight-bold"> </span>
  50.                 </div>
  51.                 <input type="submit" name="submit" value="submit" class="btn btn-success"   autocomplete="off">
  52.             </form><br><br>
  53.         </div>
  54.     </div>
  55.  
  56.     <script>
  57.         function validation()
  58.         {
  59.             var user = document.getElementById('user').value;
  60.             var pass = document.getElementById('pass').value;
  61.             var confirmpass = document.getElementById('conpass').value;
  62.             var mobileNumber = document.getElementById('mobileNumber').value;
  63.             var emails = document.getElementById('emails').value;
  64.  
  65.             if(user == ""){
  66.                 document.getElementById('username').innerHTML =" ** Please fill the username field";
  67.                 return false;
  68.             }
  69.             if((user.length <= 2) || (user.length > 20)) {
  70.                 document.getElementById('username').innerHTML =" ** Username lenght must be between 2 and 20";
  71.                 return false;  
  72.             }
  73.             if(!isNaN(user)){
  74.                 document.getElementById('username').innerHTML =" ** only characters are allowed";
  75.                 return false;
  76.             }
  77.             if(pass == ""){
  78.                 document.getElementById('passwords').innerHTML =" ** Please fill the password field";
  79.                 return false;
  80.             }
  81.             if((pass.length <= 5) || (pass.length > 20)) {
  82.                 document.getElementById('passwords').innerHTML =" ** Passwords lenght must be between  5 and 20";
  83.                 return false;  
  84.             }
  85.             if(pass!=confirmpass){
  86.                 document.getElementById('confrmpass').innerHTML =" ** Password does not match the confirm password";
  87.                 return false;
  88.             }
  89.             if(confirmpass == ""){
  90.                 document.getElementById('confrmpass').innerHTML =" ** Please fill the confirmpassword field";
  91.                 return false;
  92.             }
  93.             if(mobileNumber == ""){
  94.                 document.getElementById('mobileno').innerHTML =" ** Please fill the mobile NUmber field";
  95.                 return false;
  96.             }
  97.             if(isNaN(mobileNumber)){
  98.                 document.getElementById('mobileno').innerHTML =" ** user must write digits only not characters";
  99.                 return false;
  100.             }
  101.             if(mobileNumber.length!=10){
  102.                 document.getElementById('mobileno').innerHTML =" ** Mobile Number must be 10 digits only";
  103.                 return false;
  104.             }
  105.             if(emails == ""){
  106.                 document.getElementById('emailids').innerHTML =" ** Please fill the email idx` field";
  107.                 return false;
  108.             }
  109.             if(emails.indexOf('@') <= 0 ){
  110.                 document.getElementById('emailids').innerHTML =" ** @ Invalid Position";
  111.                 return false;
  112.             }
  113.             if((emails.charAt(emails.length-4)!='.') && (emails.charAt(emails.length-3)!='.')){
  114.                 document.getElementById('emailids').innerHTML =" ** . Invalid Position";
  115.                 return false;
  116.             }
  117.         }
  118.  
  119.     </script>
  120.  
  121. </body>
  122. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!