API tools faq
paste
Advertisement
fm-ezra6-1

Complete Form Validation JavaScript Part 1

fm-ezra6-1
Apr 25th, 2018
236
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>RAYEES AHMED SHAIKH - form validation with Javascript Part 1</title>
  5. </head>
  6. <body>
  7.    
  8. <style type="text/css">
  9.     #form{margin-top:100px;margin-left:30px;}
  10.     .warning_msg{color:#ae0000;margin:3px 0px 0px 5px}
  11.     .warning_brd{border:1px solid #ae0000}
  12. </style>
  13.    
  14. <!--playlist URL on youtube.com-->
  15. <!--https://www.youtube.com/playlist?list=PLFmBk1phabmF_gAOuhq6AI6Zn-iSmFe9x-->
  16.  
  17. <form name="address" class="form-horizontal" id="form" action="hello.html" method="post">
  18.     <div class="form-group">
  19.         <label for="name" class="col-sm-2 col-lg-2 control-label">Name:</label>
  20.         <div class="col-sm-10 col-lg-5" id="name_div">
  21.             <input type="text" class="form-control" id="name" placeholder="Full Name" onblur="CheckEmpty('name')"/>
  22.         </div>
  23.     </div>
  24.     <div class="form-group">
  25.         <label for="username" class="col-sm-2 col-lg-2 control-label">User Name:</label>
  26.         <div class="col-sm-10 col-lg-5" id="username_div">
  27.             <input type="text" class="form-control" id="username" placeholder="User Name" onblur="CheckEmpty('username')"/>
  28.         </div>
  29.     </div>
  30.     <div class="form-group">
  31.         <label for="email" class="col-sm-2 col-lg-2 control-label">Email:</label>
  32.         <div class="col-sm-10 col-lg-5" id="email_div">
  33.             <input type="email" class="form-control" id="email" placeholder="Email" onblur="CheckEmpty('email'); ValidateEmail('email')"/>
  34.         </div>
  35.     </div>
  36.     <div class="form-group">
  37.         <label for="password" class="col-sm-2 col-lg-2 control-label">Password:</label>
  38.         <div class="col-sm-10 col-lg-5" id="password_div">
  39.             <input type="password" class="form-control" id="password" placeholder="Password" onblur="CheckEmpty('password'); ValidatePassword('password')"/>
  40.         </div>
  41.     </div>
  42.     <div class="form-group">
  43.         <label for="cn_password" class="col-sm-2 col-lg-2 control-label">Confirm Password:</label>
  44.         <div class="col-sm-10 col-lg-5" id="cn_password_div">
  45.             <input type="password" class="form-control" id="cn_password" placeholder="Confirm Password" onblur="CheckEmpty('cn_password'); ConfirmPassword('password', 'cn_password')"/>
  46.         </div>
  47.     </div>
  48.     <div class="form-group">
  49.         <label for="select" class="col-sm-2 col-lg-2 control-label">Select:</label>
  50.         <div class="col-sm-10 col-lg-5" id="select_div">
  51.             <select class="form-control" id="select" onchange="ValidateSelect('select')">
  52.                 <option value="">Select your country</option>
  53.                 <option value="country001">Country 001</option>
  54.                 <option value="country002">Country 002</option>
  55.                 <option value="country003">Country 003</option>
  56.                 <option value="country004">Country 004</option>
  57.                 <option value="country005">Country 005</option>
  58.                 <option value="country006">Country 006</option>
  59.                 <option value="country007">Country 007</option>
  60.                 <option value="country008">Country 008</option>
  61.                 <option value="country009">Country 009</option>
  62.                 <option value="country010">Country 010</option>
  63.                 <option value="country011">Country 011</option>
  64.             </select>
  65.         </div>
  66.     </div>
  67.     <div class="form-group">
  68.         <div class="col-sm-offset-2 col-sm-10">
  69.             <div class="checkbox" id="checkbox_div">
  70.                 <label>
  71.                     <input type="checkbox" id="checkbox" onchange="ValidateCheckbox('checkbox')"/> I Agree
  72.                 </label>
  73.             </div>
  74.         </div>
  75.     </div>
  76.     <div class="form-group">
  77.         <div class="col-sm-offset-2 col-sm-10">
  78.             <input type="submit" id="submit" class="btn-default" value="Sign in"/>
  79.         </div>
  80.     </div>
  81. </form>
  82.  
  83.  
  84. <script type="text/javascript">    
  85.     //function checks for empty fields
  86.     function CheckEmpty(field_id){
  87.         //
  88.         var MyValue = document.getElementById(field_id).value;
  89.         if(MyValue == "" || MyValue == null){
  90.             //code
  91.             alert("You can't leave this empty.");
  92.         }
  93.     }
  94.    
  95.     //function validates the given email id
  96.     function ValidateEmail(email){
  97.         var MyEmail = document.getElementById(email).value
  98.         var format = /.+@.+/;
  99.         if(!MyEmail.match(format)){
  100.             alert("Please enter a valid email.");
  101.         };
  102.     }
  103.    
  104.     //function validates the password field
  105.     function ValidatePassword(password){
  106.         var MyPassword=document.getElementById(password).value;
  107.         var format = /(?=^.{8,}$)(?=.*\d)(?=.*[!@#$%^&*]+)(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/;
  108.         if(!MyPassword.match(format)){
  109.             alert("The password must be a combination of Uppercase, Lowercase, Numbers, Special characters and at least 8 characters long.");
  110.         }
  111.     }
  112.    
  113.     //function confirms that passwords are the same
  114.     function ConfirmPassword(password, confirm_password){
  115.         var Password=document.getElementById(password).value;
  116.         var ConfirmPassword = document.getElementById(confirm_password).value;
  117.         if(ConfirmPassword !== Password){
  118.             alert("Please enter the same password in both fields.");
  119.         }
  120.     }
  121.    
  122.     //function checks the checkboxes
  123.     function ValidateCheckbox(checkbox){
  124.         var check_box = document.getElementById(checkbox).checked;
  125.         if(check_box == false){
  126.             //code
  127.             alert("You must agree to proceed.");
  128.         }
  129.     }
  130.    
  131.     //function validates the selections
  132.     function ValidateSelect(select){
  133.         //code
  134.         selected = document.getElementById(select).selectedIndex;
  135.         if(selected == 0){
  136.             //code
  137.             alert("Please select your country.");
  138.         }
  139.     }
  140.    
  141. </script>
  142.  
  143. <!--<script src="external-validation-file.js"></script>-->
  144. </body>
  145. </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!