In this jQuery Bootstrap tutorial, I will let you know how to validate open and close time with the help of callback feature.
This example will helpful when you have two timepicker to pick open and close time and you are tring to validate open time must be less than close time or close time must be greater than open time.
In this example, I have created a custom method for time validation and pass this method inside the callback of Bootstrap form validator.
This is very useful when you are developing a system where you need to have a registration form with start and end time of a merchant/vendor and there you need to set some validation rules like vendor can not select invalid time format or vendor can not left empty value for the required field.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery Bootstrap open and close time validation with callback</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css"> </head> <body> <form id="myform" class="form-horizontal"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="col-md-5"> <div class="form-group"> <label for="Open Time:">Open Time:</label> <input placeholder="Open Time" class="form-control col-lg-6 timepicker" autocomplete="off" id="open_time" name="open_time" type="text"> </div> </div> <div class="col-md-5"> <div class="form-group"> <label for="Close Time:">Close Time:</label> <input placeholder="Close Time" class="form-control col-lg-6 timepicker" autocomplete="off" id="close_time" name="close_time" type="text"> </div> </div> </div> </div> <div class="row"> <div class="col-md-offset-5 col-md-2"> <div class="form-group"> <button type="submit" class="btn btn-default">Validate</button> </div> </div> </div> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script> <script> $('.timepicker').timepicker({ timeFormat: 'h:i A', showSecond: true, ampm: true }); function timeToInt(time) { var now = new Date(); var dt = (now.getMonth() + 1) + "/" + now.getDate() + "/" + now.getFullYear() + " " + time; var d = new Date(dt); console.log(d); return d; } function checkDates() { if (($('#open_time').val() == '') || ($('#close_time').val() == '')) return true; var start = timeToInt($('#open_time').val()); var end = timeToInt($('#close_time').val()); console.log($('#open_time').val()); console.log(start, end); if ((start == -1) || (end == -1)) { return false; } if (start >= end) { return false; } return true; } $(document).ready(function() { $('.timepicker').on('change', function() { $('#myform').bootstrapValidator('revalidateField', 'open_time'); $('#myform').bootstrapValidator('revalidateField', 'close_time'); }); $('#myform').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { open_time: { validators: { notEmpty: { message: 'Please select open time' }, callback: { message: "Start time should be lower than end time", callback: function(value, validator, $field) { return checkDates(); } } } }, close_time: { validators: { notEmpty: { message: 'Please select close time' }, callback: { message: "Close time should be greater than end time", callback: function(value, validator, $field) { return checkDates(); } } } }, } }); }); </script> </body> </html>
