API tools faq
paste
abstractindia

Validating Bootstrap datepicker inside jquery-steps

abstractindia
Oct 6th, 2015
483
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.50 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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  14. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  15. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css" />
  16. <link rel="stylesheet" href="http://formvalidation.io/vendor/jquery.steps/css/jquery.steps.css" />
  17. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.standalone.css"/>
  18. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  19. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  20. <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script>
  21. <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
  22. <script src="http://formvalidation.io/vendor/jquery.steps/js/jquery.steps.min.js"></script>
  23. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.js"></script>
  24.    
  25.    
  26.     <!--<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
  27.    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
  28.    <link rel="stylesheet" href="css/jquery.steps.css">
  29.  
  30.     <script src="js/jquery-1.11.2.min.js"></script>
  31.     <script src="js/jquery.steps.js"></script>-->
  32.    
  33.     <script>
  34.     // Tries to load the saved state (step position)
  35.     if (options.saveState && $.cookie)
  36.    {
  37.        var savedState = $.cookie(_cookiePrefix + getUniqueId(wizard));
  38.         // Sets the saved position to the start index if not undefined or out of range
  39.         var savedIndex = parseInt(savedState, 0);
  40.         if (!isNaN(savedIndex) && savedIndex < state.stepCount)
  41.        {
  42.            startIndex = savedIndex;
  43.         }
  44.     }
  45.     </script>
  46.    
  47.     <style type="text/css">
  48. #multiphase.form-control-feedback {
  49.     /* To make the feedback icon visible */
  50.     z-index: 100;
  51. }
  52. </style>    
  53.    
  54.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  55.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  56.     <!--[if lt IE 9]>
  57.      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  58.      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  59.    <![endif]-->
  60. </head>
  61. <body>
  62. <!-- wrapper container-->
  63. <div id="wrapper">
  64. <!-- main container div-->
  65. <div id="container" class="container">
  66.     <div class="row">
  67.         <div id="maincontent" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  68.             <div class="row">
  69.                 <div id="" class="col-lg-12">
  70.                     <form id="multiphase" role="form" class="form-horizontal" action="" method="post">
  71.                              <h2>Step</h2>
  72.                             <section data-step="0">
  73.                                  <h2>Student's Details:</h2>
  74.  
  75.                                 <hr>
  76.                                 <div class="form-group">
  77.                                     <label for="sd_lastname" class="col-lg-2 control-label">Last Name:</label>
  78.                                     <div class="col-lg-3">
  79.                                         <input type="text" name="sd_lastname" id="sd_lastname" class="form-control" placeholder="Last Name" value="" tabindex="1">
  80.                                     </div>
  81.                                 </div>
  82.                                 <div class="form-group">
  83.                                     <label for="sd_firstname" class="col-lg-2 control-label">First Name:</label>
  84.                                     <div class="col-lg-3">
  85.                                         <input type="text" name="sd_firstname" id="sd_firstname" class="form-control" placeholder="First Name" value="" tabindex="2">
  86.                                     </div>
  87.                                 </div>
  88.                                 <div class="form-group">
  89.                                     <label for="sd_dob" class="col-lg-2 control-label">Date of Birth:</label>
  90.                                         <div class="col-lg-3">
  91.                                             <div class="input-group date">
  92.                                                 <input type="text" name="sd_dob" id="sd_dob" class="form-control datepicker" placeholder="dd-mm-yyyy" tabindex="5">                                                    <div class="input-group-addon">
  93.                                                         <i class="fa fa-calendar"></i>
  94.                                                     </div>
  95.                                             </div>
  96.                                         </div>
  97.                                 </div>
  98.                            </section>
  99.                              <h2>Step</h2>
  100.  
  101.                             <section data-step="1">
  102.                                  <h2>Parent's Details:</h2>
  103.  
  104.                                 <hr>
  105.                                 <div class="form-group">
  106.                                     <label for="pd_lastname" class="col-lg-2 control-label">Last Name:</label>
  107.                                     <div class="col-lg-3">
  108.                                         <input type="text" name="pd_lastname" id="pd_lastname" class="form-control" placeholder="Last Name" value="" tabindex="1">
  109.                                     </div>
  110.                                 </div>
  111.                                 <div class="form-group">
  112.                                     <label for="pd_firstname" class="col-lg-2 control-label">First Name:</label>
  113.                                     <div class="col-lg-3">
  114.                                         <input type="text" name="pd_firstname" id="pd_firstname" class="form-control" placeholder="First Name" value="" tabindex="2">
  115.                                     </div>
  116.                                 </div>
  117.                                 <div class="form-group">
  118.                                     <label for="pd_dob" class="col-lg-2 control-label">Date of Birth:</label>
  119.                                         <div class="col-lg-3">
  120.                                             <div class="input-group date">
  121.                                                 <input type="text" name="pd_dob" id="pd_dob" class="form-control datepicker" placeholder="dd-mm-yyyy" tabindex="5">                                                    <div class="input-group-addon">
  122.                                                         <i class="fa fa-calendar"></i>
  123.                                                     </div>
  124.                                             </div>
  125.                                         </div>
  126.                                 </div>
  127.                                
  128.                             </section>
  129.                              <h2>Step</h2>
  130.  
  131.                             <section data-step="2">
  132.                                  <h2>Reference Details:</h2>
  133.  
  134.                                 <hr>
  135.                                 <div class="form-group">
  136.                                     <label for="rd_schoolrefname" class="col-lg-3 control-label">School Principal's Name:</label>
  137.                                     <div class="col-lg-3">
  138.                                         <input type="text" name="rd_schoolrefname" id="rd_schoolrefname" class="form-control" placeholder="First Name Last Name" value="" tabindex="1">
  139.                                     </div>
  140.                                 </div>
  141.                                 <div class="form-group">
  142.                                     <label for="rd_schoolrefmobile" class="col-lg-3 control-label">Phone or Mobile No.:</label>
  143.                                     <div class="col-lg-2">
  144.                                         <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">
  145.                                     </div>
  146.                                 </div>
  147.                                 <div class="form-group">
  148.                                     <label for="rd_schoolrefemail" class="col-lg-3 control-label">E-Mail ID:</label>
  149.                                     <div class="col-lg-3">
  150.                                         <input type="text" name="rd_schoolrefemail" id="rd_schoolrefemail" class="form-control" placeholder="E-Mail ID" value="" tabindex="3">
  151.                                     </div>
  152.                                 </div>
  153.                             </section>
  154.                         <!-- end of wizard-->
  155.                     </form>
  156.                     <!-- end of form-->
  157.                 </div>
  158.             </div>
  159.             <!-- end of row-->
  160.             <div class="modal fade" id="welcomeModal">
  161.                 <div class="modal-dialog">
  162.                     <div class="modal-content">
  163.                         <div class="modal-header">
  164.                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  165.                              <h1 class="modal-title text-center">Add new last name</h1>
  166.  
  167.                         </div>
  168.                         <div class="modal-body">
  169.                             <form method="POST" name="add_lastname">
  170.                                 <input type="text" name="add_lastname" id="add_lastname" class="form-control" placeholder="Enter your last name here" value="">
  171.                                 <p class="">The first alphabet of the last name <strong>MUST</strong> be in upper case.</p>
  172.                             </form>
  173.                         </div>
  174.                         <div class="modal-footer">
  175.                             <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
  176.                             <input name="addlastname" type="submit" value="Add" class="btn btn-primary">
  177.                         </div>
  178.                     </div>
  179.                 </div>
  180.             </div>
  181.         </div>
  182.     </div>
  183.     <div class="row hidden-print">
  184.         <div id="footer" class="col-lg-12"></div>
  185.     </div>
  186. </div>
  187. </div>
  188.  
  189.  <!-- jQuery (necessary for Bootstrap's JavaScript plugins)
  190.    <script src="js/bootstrap.min.js"></script>
  191.    <script type="text/javascript" src="js/bootstrapValidator.js"></script>-->
  192.    
  193.  
  194. <script type="text/javascript">
  195. $(document).ready(function () {
  196.     function adjustIframeHeight() {
  197.         var $body   = $('body'),
  198.             $iframe = $body.data('iframe.fv');
  199.         if ($iframe) {
  200.             // Adjust the height of iframe
  201.             $iframe.height($body.height());
  202.         }
  203.     }
  204.     $("#multiphase").steps({
  205.         headerTag: "h2",
  206.         bodyTag: "section",
  207.         saveState: true,
  208.         onStepChanged: function(e, currentIndex, priorIndex) {
  209.                 // You don't need to care about it
  210.                 // It is for the specific demo
  211.                 adjustIframeHeight();
  212.             },
  213.             // Triggered when clicking the Previous/Next buttons
  214.             onStepChanging: function(e, currentIndex, newIndex) {
  215.                 var fv         = $('#multiphase').data('formValidation'), // FormValidation instance
  216.                     // The current step container
  217.                     $container = $('#multiphase').find('section[data-step="' + currentIndex +'"]');
  218.  
  219.                 // Validate the container
  220.                 fv.validateContainer($container);
  221.  
  222.                 var isValidStep = fv.isValidContainer($container);
  223.                 if (isValidStep === false || isValidStep === null) {
  224.                     // Do not jump to the next step
  225.                     return false;
  226.                 }
  227.  
  228.                 return true;
  229.             },
  230.             // Triggered when clicking the Finish button
  231.             onFinishing: function(e, currentIndex) {
  232.                 var fv         = $('#multiphase').data('formValidation'),
  233.                     $container = $('#multiphase').find('section[data-step="' + currentIndex +'"]');
  234.                    
  235.                 // If user click on "Previous" button, we just normally let he/she goes
  236.                 if (newIndex < currentIndex) {
  237.                    return true;
  238.                 }  
  239.                                
  240.  
  241.                // Validate the last step container
  242.                fv.validateContainer($container);
  243.  
  244.                var isValidStep = fv.isValidContainer($container);
  245.                if (isValidStep === false || isValidStep === null) {
  246.                    return false;
  247.                }
  248.  
  249.                return true;
  250.            },
  251.            onFinished: function(e, currentIndex) {
  252.                // Uncomment the following line to submit the form using the defaultSubmit() method
  253.                //$('#multiphase').formValidation('defaultSubmit');
  254.  
  255.                // For testing purpose
  256.                $('#welcomeModal').modal("show");
  257.            }
  258.        }).formValidation({
  259.        excluded: ':disabled',
  260.        message: 'This value is not valid',
  261.        container: 'tooltip',
  262.        feedbackIcons: {
  263.            valid: 'glyphicon glyphicon-ok',
  264.            invalid: 'glyphicon glyphicon-remove',
  265.            validating: 'glyphicon glyphicon-refresh'
  266.        },
  267.        fields: {
  268.            //last name validation  
  269.            sd_lastname: {
  270.                container: 'popover',
  271.                validators: {
  272.                    notEmpty: {
  273.                        message: 'The Last Name is required and cannot be empty'
  274.                    }
  275.                }
  276.            },
  277.            //first name validation
  278.            sd_firstname: {
  279.                container: 'popover',
  280.                validators: {
  281.                    notEmpty: {
  282.                        message: 'The First Name is required and cannot be empty'
  283.                    },
  284.                    stringLength: {
  285.                        min: 3,
  286.                        max: 30,
  287.                        message: 'The First Name must be more than 7 and less than 30 characters long'
  288.                    },
  289.                    regexp: {
  290.                        regexp: /^[A-Z]+$/i,
  291.                        message: 'The First Name can only consist of alphabetical characters'
  292.                    }
  293.                }
  294.            },
  295.            //validation of Parent's details step start
  296.            //last name validation  
  297.            pd_lastname: {
  298.                container: 'popover',
  299.                validators: {
  300.                    notEmpty: {
  301.                        message: 'The Last Name is required and cannot be empty'
  302.                    }
  303.                }
  304.            },
  305.            
  306.             //date of birth validation
  307.             sd_dob:{
  308.                 container: 'popover',
  309.                validators: {
  310.                    notEmpty: {
  311.                        message: 'The Date of Birth is required and cannot be empty'
  312.                    }
  313.                }
  314.            },
  315.                        
  316.            //parent first name validation
  317.            pd_firstname: {
  318.                container: 'popover',
  319.                validators: {
  320.                    notEmpty: {
  321.                        message: 'The First Name is required and cannot be empty'
  322.                    },
  323.                    stringLength: {
  324.                        min: 3,
  325.                        max: 30,
  326.                        message: 'The First Name must be more than 7 and less than 30 characters long'
  327.                    },
  328.                    regexp: {
  329.                        regexp: /^[A-Z]+$/i,
  330.                        message: 'The First Name can only consist of alphabetical characters'
  331.                    }
  332.                }
  333.            },
  334.            
  335.            
  336.             //date of birth validation
  337.             pd_dob:{
  338.                 container: 'popover',
  339.                validators: {
  340.                    notEmpty: {
  341.                        message: 'The Date of Birth is required and cannot be empty'
  342.                    }
  343.                }
  344.            },
  345.            
  346.            // Validation for Reference details starts
  347.            //School reference name
  348.            rd_schoolrefname: {
  349.                container: 'popover',
  350.                validators: {
  351.                    notEmpty: {
  352.                        message: 'The School Reference Name is required and cannot be empty'
  353.                    },
  354.                    stringLength: {
  355.                        min: 7,
  356.                        max: 40,
  357.                        message: 'The School Reference Name must be more than 7 and less than 40 characters long'
  358.                    },
  359.                    regexp: {
  360.                        regexp: /^[A-Z\s]+$/i,
  361.                        message: 'The School Reference Name can only consist of alphabetical characters'
  362.                    }
  363.                }
  364.            },
  365.            //School reference phone
  366.            rd_schoolrefmobile: {
  367.                container: 'popover',
  368.                validators: {
  369.                    notEmpty: {
  370.                        message: 'The Phone or Mobile is required and cannot be empty'
  371.                    }
  372.                }
  373.            },
  374.            rd_schoolrefemail: {
  375.                container: 'popover',
  376.                validators: {
  377.                    notEmpty: {
  378.                        message: 'The E-Mail ID is required and cannot be empty'
  379.                    },
  380.                    regexp: {
  381.                        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,
  382.                        message: 'The E-Mail ID is not a valid E-Mail'
  383.                    }
  384.                }
  385.            },
  386.        }
  387.  
  388.    })
  389.    
  390.  
  391. $('.datepicker').datepicker({
  392.    format: "dd-mm-yyyy",
  393.    autoclose: true,
  394.    todayHighlight: true,
  395.    //orientation: "bottom"
  396.    todayBtn: "linked",
  397.    todayHighlight: true
  398. })
  399.  
  400.  
  401.    
  402.  
  403. });
  404.  </script>
  405. </body>
  406. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!