API tools faq
paste
Advertisement
abstractindia

validating jquery-steps using bootstrap validator

abstractindia
Oct 5th, 2015
900
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.04 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  7.         <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  8.  
  9.  
  10. <title>jquery-steps | validation step by step</title>
  11.  
  12. <!-- Bootstrap -->
  13.     <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
  14.     <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
  15.     <link rel="stylesheet" href="css/jquery.steps.css">
  16.  
  17.     <script src="js/jquery-1.11.2.min.js"></script>
  18.     <script src="js/jquery.steps.js"></script>
  19.    
  20.     <script>
  21.     // Tries to load the saved state (step position)
  22.     if (options.saveState && $.cookie)
  23.    {
  24.        var savedState = $.cookie(_cookiePrefix + getUniqueId(wizard));
  25.         // Sets the saved position to the start index if not undefined or out of range
  26.         var savedIndex = parseInt(savedState, 0);
  27.         if (!isNaN(savedIndex) && savedIndex < state.stepCount)
  28.        {
  29.            startIndex = savedIndex;
  30.         }
  31.     }
  32.     </script>
  33.    
  34.     <style type="text/css">
  35. #multiphase.form-control-feedback {
  36.     /* To make the feedback icon visible */
  37.     z-index: 100;
  38. }
  39. </style>    
  40.    
  41.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  42.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  43.     <!--[if lt IE 9]>
  44.      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  45.      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  46.    <![endif]-->
  47. </head>
  48. <body>
  49. <!-- wrapper container-->
  50. <div id="wrapper">
  51. <!-- main container div-->
  52. <div id="container" class="container">
  53.        
  54.         <div class="row">
  55.        
  56.             <div id="maincontent" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  57.            
  58.                 <div class="row">
  59.                     <div id="" class="col-lg-12">
  60.                         <form id="multiphase" role="form" class="form-horizontal" action="" method="post">
  61.                         <div id="wizard">
  62.                             <h2>Step</h2>
  63.                             <section>
  64.                                 <h2>Student's Details:</h2>
  65.                                 <hr>
  66.                                 <div class="form-group">
  67.                                     <label for="sd_lastname" class="col-lg-2 control-label">Last Name:</label>
  68.                                         <div class="col-lg-3">
  69.                                             <input type="text" name="sd_lastname" id="sd_lastname" class="form-control" placeholder="Last Name" value="" tabindex="1">
  70.                                         </div>
  71.                                 </div>     
  72.                                 <div class="form-group">
  73.                                     <label for="sd_firstname" class="col-lg-2 control-label">First Name:</label>
  74.                                         <div class="col-lg-3">
  75.                                             <input type="text" name="sd_firstname" id="sd_firstname" class="form-control" placeholder="First Name" value="" tabindex="2">
  76.                                         </div>
  77.                                 </div>
  78.                             </section>
  79.                
  80.  
  81.                 <h2>Step</h2>
  82.                             <section>
  83.                                 <h2>Parent's Details:</h2>
  84.                                
  85.                                 <hr>
  86.                                 <div class="form-group">
  87.                                     <label for="pd_lastname" class="col-lg-2 control-label">Last Name:</label>
  88.                                         <div class="col-lg-3">
  89.                                             <input type="text" name="pd_lastname" id="pd_lastname" class="form-control" placeholder="Last Name" value="" tabindex="1">
  90.                                         </div>
  91.                                 </div>     
  92.                                 <div class="form-group">
  93.                                     <label for="pd_firstname" class="col-lg-2 control-label">First Name:</label>
  94.                                         <div class="col-lg-3">
  95.                                             <input type="text" name="pd_firstname" id="pd_firstname" class="form-control" placeholder="First Name" value="" tabindex="2">
  96.                                         </div>
  97.                                 </div>                
  98.                             </section>
  99.                
  100.                
  101.                 <h2>Step</h2>
  102.                 <section>
  103.                     <h2>Reference Details:</h2>
  104.                         <hr>
  105.  
  106. <div class="form-group">
  107.     <label for="rd_schoolrefname" class="col-lg-3 control-label">School Principal's Name:</label>
  108.         <div class="col-lg-3">
  109.             <input type="text" name="rd_schoolrefname" id="rd_schoolrefname" class="form-control" placeholder="First Name Last Name" value="" tabindex="1">
  110.                    
  111.         </div>
  112. </div>
  113.  
  114. <div class="form-group">
  115.     <label for="rd_schoolrefmobile" class="col-lg-3 control-label">Phone or Mobile No.:</label>
  116.         <div class="col-lg-2">
  117.             <input type="text" name="rd_schoolrefmobile" id="rd_schoolrefmobile" class="form-control" placeholder="Phone or Mobile Number" data-mask="+99-99999-99999" value="" tabindex="2">
  118.         </div>
  119. </div>
  120.  
  121. <div class="form-group">
  122.     <label for="rd_schoolrefemail" class="col-lg-3 control-label">E-Mail ID:</label>
  123.         <div class="col-lg-3">
  124.             <input type="text" name="rd_schoolrefemail" id="rd_schoolrefemail" class="form-control" placeholder="E-Mail ID" value="" tabindex="3">
  125.         </div>
  126. </div>
  127.  
  128. </section>
  129.                
  130.            
  131.             </div><!-- end of wizard-->
  132.                         </form><!-- end of form-->
  133.                 </div>
  134.               </div><!-- end of row-->
  135.              
  136. <div class="modal fade" id="modal-1">
  137.     <div class="modal-dialog">
  138.         <div class="modal-content">
  139.            
  140.             <div class="modal-header">
  141.                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  142.                 <h1 class="modal-title text-center">Add new last name</h1>
  143.             </div>
  144.            
  145.             <div class="modal-body">
  146.                 <form method="POST" name="add_lastname">
  147.                     <input type="text" name="add_lastname" id="add_lastname" class="form-control" placeholder="Enter your last name here" value="">
  148.                     <p class="">The first alphabet of the last name <strong>MUST</strong> be in upper case.</p>
  149.                 </form>
  150.             </div>
  151.            
  152.             <div class="modal-footer">
  153.                 <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
  154.                 <input name="addlastname" type="submit" value="Add" class="btn btn-primary">
  155.             </div>
  156.         </div>
  157.     </div>
  158. </div>
  159.  
  160.                
  161.             </div>
  162.         </div>
  163.        
  164.        
  165.         <div class="row hidden-print">
  166.             <div id="footer" class="col-lg-12">
  167.                
  168.            
  169.             </div>      
  170.         </div>
  171. </div>
  172. </div>
  173.  
  174.  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  175.     <script src="js/bootstrap.min.js"></script>
  176.     <script type="text/javascript" src="js/bootstrapValidator.js"></script>
  177.    
  178.  
  179.     <script type="text/javascript">
  180.   $(document).ready(function() {
  181.      
  182.       $("#wizard").steps({
  183.             headerTag: "h2",
  184.             bodyTag: "section",
  185.             saveState: true,               
  186.       })
  187.        
  188.      
  189.          
  190.       $('#multiphase').bootstrapValidator({
  191.           excluded: ':disabled',
  192.           message: 'This value is not valid',
  193.           container: 'tooltip',
  194.           feedbackIcons: {
  195.               valid: 'glyphicon glyphicon-ok',
  196.               invalid: 'glyphicon glyphicon-remove',
  197.               validating: 'glyphicon glyphicon-refresh'
  198.           },
  199.           fields: {
  200.           //last name validation  
  201.             sd_lastname: {
  202.                 container: 'popover',
  203.                 validators: {
  204.                     notEmpty: {
  205.                         message: 'The Last Name is required and cannot be empty'
  206.                     }
  207.                 }
  208.             },   
  209.  
  210.         //first name validation
  211.           sd_firstname: {
  212.                 container: 'popover',
  213.                 validators: {
  214.                     notEmpty: {
  215.                         message: 'The First Name is required and cannot be empty'
  216.                     },
  217.                     stringLength: {
  218.                         min: 3,
  219.                         max: 30,
  220.                         message: 'The First Name must be more than 7 and less than 30 characters long'
  221.                     },
  222.                     regexp: {
  223.                         regexp: /^[A-Z]+$/i,
  224.                         message: 'The First Name can only consist of alphabetical characters'
  225.                     }
  226.                 }
  227.             },
  228.            
  229.             //validation of Parent's details step start
  230.             //last name validation  
  231.             pd_lastname: {
  232.                 container: 'popover',
  233.                 validators: {
  234.                     notEmpty: {
  235.                         message: 'The Last Name is required and cannot be empty'
  236.                     }
  237.                 }
  238.             },   
  239.  
  240.               //first name validation
  241.           pd_firstname: {
  242.                 container: 'popover',
  243.                 validators: {
  244.                     notEmpty: {
  245.                         message: 'The First Name is required and cannot be empty'
  246.                     },
  247.                     stringLength: {
  248.                         min: 3,
  249.                         max: 30,
  250.                         message: 'The First Name must be more than 7 and less than 30 characters long'
  251.                     },
  252.                     regexp: {
  253.                         regexp: /^[A-Z]+$/i,
  254.                         message: 'The First Name can only consist of alphabetical characters'
  255.                     }
  256.                 }
  257.             },
  258.            
  259.             // Validation for Reference details starts
  260.             //School reference name
  261.             rd_schoolrefname: {
  262.                 container: 'popover',
  263.                 validators: {
  264.                     notEmpty: {
  265.                         message: 'The School Reference Name is required and cannot be empty'
  266.                     },
  267.             stringLength: {
  268.                         min: 7,
  269.                         max: 40,
  270.                         message: 'The School Reference Name must be more than 7 and less than 40 characters long'
  271.                     },
  272.                     regexp: {
  273.                         regexp: /^[A-Z\s]+$/i,
  274.                         message: 'The School Reference Name can only consist of alphabetical characters'
  275.                     }
  276.                 }
  277.             },
  278.             //School reference phone
  279.             rd_schoolrefmobile: {
  280.                 container: 'popover',
  281.                 validators: {
  282.                     notEmpty: {
  283.                         message: 'The Phone or Mobile is required and cannot be empty'
  284.                     }                  
  285.                 }
  286.             },
  287.             rd_schoolrefemail: {
  288.                 container: 'popover',
  289.                 validators: {
  290.                     notEmpty: {
  291.                         message: 'The E-Mail ID is required and cannot be empty'
  292.                     },
  293.                     regexp:{
  294.                         regexp: /[a-zA-Z0-9]+(?:(\.|_)[A-Za-z0-9!#$%&'*+\/=?^`{|}~-]+)*@(?!([a-zA-Z0-9]*\.[a-zA-Z0-9]*\.[a-zA-Z0-9]*\.))(?:[A-Za-z0-9](?:[a-zA-Z0-9-]*[A-Za-z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/g,
  295.                         message: 'The E-Mail ID is not a valid E-Mail'
  296.                     }                  
  297.                }
  298.            },
  299.         }
  300.      
  301.       })
  302.      
  303.  });
  304.   </script>
  305. </body>
  306. </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!