Bootstrap Validator to validate open and close time with callback

Bootstrap Validator to validate open and close time with callback

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>

Phone: (+91) 8800417876
Noida, 201301
Attention Required! | Cloudflare

Sorry, you have been blocked

You are unable to access ressim.net

Why have I been blocked?

This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.

What can I do to resolve this?

You can email the site owner to let them know you were blocked. Please include what you were doing when this page came up and the Cloudflare Ray ID found at the bottom of this page.