API tools faq
paste
Advertisement
Guest User

Form Validation On Input Change

a guest
Jan 13th, 2017
221
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 8.23 KB | None | 0 0
raw download clone embed print report
  1.  
  2.         <script src="templates/bootstrap/assets/js/jquery.min.js"></script>
  3.         <script src="templates/bootstrap/assets/js/bootstrap.min.js"></script>
  4.         <script src="templates/bootstrap/assets/js/bootstrap.custom.js"></script>
  5.     <div class="row">
  6.  
  7.     <?php include "pages/sidebar.php"; ?>
  8.  
  9.     <div class="span9">
  10.     <ul class="breadcrumb">
  11.         <li><a href="index.php">Home</a> <span class="divider">/</span></li>
  12.         <li class="active">Registration</li>
  13.     </ul>
  14.     <h3> Registration</h3> 
  15.    
  16.     <?php
  17.     if(isset($_POST['btnRegister'])){
  18.         $nextUserId = $user->nextAutoIncrement('super8_customers');
  19.         $nextUid = $user->nextAutoIncrement('super8_users');
  20.  
  21.         $date = $common->getDateNow();
  22.  
  23.         if(isset($_SESSION['res_message'])){
  24.             $message = $_SESSION['res_message'];
  25.         }
  26.  
  27.             $params = array(
  28.                 'custUid'=>$nextUid,
  29.                 'custID'=>$nextUserId,
  30.                 'cust_Lname'=>$_POST['cust_Lname'],
  31.                 'cust_Fname'=>$_POST['cust_Fname'],
  32.                 'cust_Mname'=>$_POST['cust_Mname'],
  33.                 'cust_Bdate'=>$_POST['cust_Bdate'],
  34.                 'cust_Age'=>$_POST['cust_Age'],
  35.                 'cust_Gender'=>$_POST['cust_Gender'],
  36.                 'cust_Mbl1'=>$_POST['cust_Mbl1'],
  37.                 'cust_Mbl2'=>'',
  38.                 'cust_Mbl3'=>'',
  39.                 'cust_Add'=>$_POST['cust_Add'],
  40.                 'cust_City'=>$_POST['cust_City'],
  41.                 'cust_Zip'=>$_POST['cust_Zip'],
  42.                 'cust_eadd'=>$_POST['cust_eadd'],
  43.                 'cust_Hl'=>$_POST['cust_Hl'],
  44.  
  45.                 'cust_username'=>$_POST['cust_User'],
  46.                 'cust_password'=>$_POST['cust_Pass'],
  47.                 'Status'=>'Activated',
  48.                 'DateNow'=>$date,
  49.                 );
  50.  
  51.            
  52.             $result = $user->registerCust($params);
  53.  
  54.             if($result){
  55.                 $_SESSION['res_message'] = 'Customer Successfully Created';
  56.                
  57.                 $nextUserId = $user->nextAutoIncrement('super8_customers');
  58.             }
  59.            
  60.             if(isset($_SESSION['res_message'])){
  61.                 $message = $_SESSION['res_message'];
  62.             }
  63.    
  64.     } ?>
  65.    
  66.    
  67.     <div class="well">
  68.    
  69.     <form class="form-horizontal" method="POST" >
  70.         <h4>Your personal information</h4>
  71.  
  72.         <div class="control-group">
  73.             <label class="control-label" for="inputFname1">Last name <sup>*</sup></label>
  74.             <div class="controls">
  75.               <input type="text" id="inputLname" placeholder="Last Name" name="cust_Lname" required />
  76.  
  77.             </div>
  78.          </div>
  79.          <div class="control-group">
  80.             <label class="control-label" for="inputLnam">First name <sup>*</sup></label>
  81.             <div class="controls">
  82.               <input type="text" id="inputFnam" placeholder="First Name" name="cust_Fname" required />
  83.             </div>
  84.          </div>
  85.           <div class="control-group">
  86.             <label class="control-label" for="inputLnam">Middle name <sup>*</sup></label>
  87.             <div class="controls">
  88.               <input type="text" id="inputMname" placeholder="Middle Name" name="cust_Mname" required />
  89.             </div>
  90.          </div>
  91.         <div class="control-group">
  92.         <label class="control-label" for="input_email">Email <sup>*</sup></label>
  93.         <div class="controls">
  94.           <input type="text" id="input_email" placeholder="Email" name="cust_eadd" required />
  95.         </div>
  96.       </div>
  97.         <div class="control-group">
  98.                 <label class="control-label" for="input_email">Username <sup>*</sup></label>
  99.                 <div class="controls">
  100.                   <input type="text" id="input_user" placeholder="Email" name="cust_User" required />
  101.                 </div>
  102.         </div>       
  103.     <div class="control-group">
  104.         <label class="control-label" for="inputPassword1">Password <sup>*</sup></label>
  105.         <div class="controls">
  106.           <input type="password" id="inputPassword1" placeholder="Password" name="cust_Pass" required />
  107.         </div>
  108.       </div>     
  109.         <div class="control-group">
  110.         <label class="control-label">Date of Birth <sup>*</sup></label>
  111.         <div class="controls">
  112.          <input type="text" id="DOB" placeholder="Pick date" name="cust_Bdate" required />
  113.         </div>
  114.       </div>
  115.  
  116.        <div class="control-group">
  117.             <label class="control-label" for="inputLnam">Age <sup>*</sup></label>
  118.             <div class="controls">
  119.               <input type="text" id="custAge" placeholder="Age" name="cust_Age" required />
  120.             </div>
  121.          </div>
  122.  
  123.           <div class="control-group">
  124.             <label class="control-label" for="inputLnam">Gender <sup>*</sup></label>
  125.             <div class="controls">
  126.               <select name="cust_Gender" id="cust_Gender" required class="form-control">
  127.                         <option value="Male">Male</option>
  128.                         <option value="Female">Female</option>
  129.                         </select>
  130.             </div>
  131.          </div>
  132.  
  133.         <h4>Your address</h4>
  134.        
  135.         <div class="control-group">
  136.             <label class="control-label" for="address">Home Address<sup>*</sup></label>
  137.             <div class="controls">
  138.               <input type="text" id="address" placeholder="Address" name="cust_Add"/> <span>Street address, P.O. box, company name, c/o</span>
  139.             </div>
  140.         </div>
  141.         <div class="control-group">
  142.             <label class="control-label" for="city">City<sup>*</sup></label>
  143.             <div class="controls">
  144.               <input type="text" id="city" placeholder="city" name="cust_City"/>
  145.             </div>
  146.         </div>
  147.         <div class="control-group">
  148.             <label class="control-label" for="postcode">Zip / Postal Code<sup>*</sup></label>
  149.             <div class="controls">
  150.               <input type="text" id="postcode" placeholder="Zip / Postal Code" name="cust_Zip"/>
  151.             </div>
  152.         </div>
  153.         <div class="control-group">
  154.             <label class="control-label" for="phone">Home Landline <sup>*</sup></label>
  155.             <div class="controls">
  156.               <input type="text" id="phone" placeholder="phone" name="cust_Hl"/> <span>You must register at least one phone number</span>
  157.             </div>
  158.         </div>
  159.        
  160.         <div class="control-group">
  161.             <label class="control-label" for="mobile">Mobile Phone </label>
  162.             <div class="controls">
  163.               <input type="text" id="mobile" placeholder="Mobile Phone" name="cust_Mbl1"/>
  164.             </div>
  165.         </div>
  166.  
  167.          <div class="controls">
  168.  
  169.     <img  src="captcha/generatecaptcha.php?rand=<?php echo rand(); ?>" id='captchaimg' >
  170.     <a href='javascript: refreshCaptcha();'><i class="icon-refresh icon-large"></i></a>
  171.   <script language='JavaScript' type='text/javascript'>
  172. function refreshCaptcha()
  173. {
  174.   var img = document.images['captchaimg'];
  175.   img.src = img.src.substring(0,img.src.lastIndexOf("?"))+"?rand="+Math.random()*1000;
  176. }
  177. </script>
  178.    
  179.     </div>
  180.     <div class="control-group">
  181.     <label class="control-label" for="inputPassword">Enter the Code Above</label>
  182.     <div class="controls">
  183.     <input id="code" name="code" type="text" placeholder="Enter the Code Above" required></td>
  184.     </div>
  185.        
  186.     <p><sup>*</sup>Required field   </p>
  187.    
  188.     <div class="control-group">
  189.             <div class="controls">
  190.                 <input class="btn btn-large btn-success" type="submit" value="Register" name="btnRegister" />
  191.             </div>
  192.         </div>     
  193.     </form>
  194. </div>
  195.  
  196. </div>
  197. </div>
  198. <!-- <script type="text/javascript">
  199.         $(function(){
  200.             $('#errMsg').fadeOut(2500);
  201.  
  202.             $("#cust_Bdate").datepicker({
  203.                 changeMonth: true,
  204.                 changeYear: true,
  205.                 onSelect: function(value, ui){
  206.                     var today = new Date(),
  207.                     dob = new Date(value),
  208.                     age = new Date(today - dob).getFullYear() - 1970;
  209.  
  210.                     $('#cust_Age').val(age);
  211.                 }
  212.             });
  213.  
  214.             $('#btn-Clear').click(function(){
  215.                 $(':input[type=text]').val('');
  216.             });
  217.  
  218.         });
  219.     </script> -->
  220.  
  221.  
  222.     <script type="text/javascript">
  223.  
  224.     $("#inputPassword1").on('change',function(e){
  225.         var illegalChars = /[\W_]/; // allow only letters and numbers
  226.         if ($("#inputPassword1").val() == "") {
  227.             $("#inputPassword1").css('background','Yellow');
  228.             error = "You didn't enter a password.\n";
  229.             alert(error);
  230.             return false;
  231.      
  232.         } else if (($("#inputPassword1").val().length < 7) || ($("#inputPassword1").val().length > 15)) {
  233.             error = "The password is the wrong length. \n";
  234.             $("#inputPassword1").css('background','Yellow');
  235.             alert(error);
  236.             return false;
  237.      
  238.         } else if (illegalChars.test($("#inputPassword1").val())) {
  239.             error = "The password contains illegal characters.\n";
  240.             $("#inputPassword1").css('background','Yellow');
  241.             alert(error);
  242.             return false;
  243.      
  244.         } else if ( ($("#inputPassword1").val().search(/[a-zA-Z]+/)==-1) || ($("#inputPassword1").val().search(/[0-9]+/)==-1) ) {
  245.             error = "The password must contain at least one numeral.\n";
  246.             $("#inputPassword1").css('background','Yellow');
  247.             alert(error);
  248.             return false;
  249.      
  250.         } else {
  251.             $("#inputPassword1").css('background','White');
  252.         }
  253.         return true;
  254.     });
  255.  
  256. </script>
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!