Bootstrap Validator To Validate Open And Close Time With Callback

Bootstrap Validator to validate open and close time with callback

In this post we will give you information about Bootstrap Validator to validate open and close time with callback. Hear we will give you detail about Bootstrap Validator to validate open and close time with callbackAnd how to use it also give you demo for it if it is necessary.

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.

See also Revised Jekyll related posts

<!DOCTYPE html>
<htmllang="en">

<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <title>jQuery Bootstrap open and close time validation with callback</title>
    <linkrel="stylesheet"type="text/css"href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css">
    <linkrel="stylesheet"href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>
    <linkrel="stylesheet"type="text/css"href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css">
</head>

<body>
	<formid="myform"class="form-horizontal">
	    <divclass="row">
            <divclass="col-md-6 col-md-offset-3">
    	        <divclass="col-md-5">
    	            <divclass="form-group">
    	                <labelfor="Open Time:">Open Time:</label>
    	                <inputplaceholder="Open Time"class="form-control col-lg-6 timepicker"autocomplete="off"id="open_time"name="open_time"type="text">
    	            </div>
    	        </div>

    	        <divclass="col-md-5">
    	            <divclass="form-group">
    	                <labelfor="Close Time:">Close Time:</label>
    	                <inputplaceholder="Close Time"class="form-control col-lg-6 timepicker"autocomplete="off"id="close_time"name="close_time"type="text">
    	            </div>
    	        </div>
            </div>		   
	    </div>
        <divclass="row">
             <divclass="col-md-offset-5 col-md-2">         
                <divclass="form-group">
                    <buttontype="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 =newDate();
            var dt = (now.getMonth() +1) +"/"+ now.getDate() +"/"+ now.getFullYear() +" "+ time;
            var d =newDate(dt);
            console.log(d);
            return d;
        }

        function checkDates() {
            if (($('#open_time').val() =='') || ($('#close_time').val() =='')) returntrue;

            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)) {
                returnfalse;
            }

            if (start >= end) {
                returnfalse;
            }
            returntrue;
        }

        $(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>

Show Demo

Label :

HTML

jQuery

CSS

Web Development

Bootstrap

JavaScript

Hope this code and post will helped you for implement Bootstrap Validator to validate open and close time with callback. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Bootstrap Validator to validate open and close time with callback

Label :

Leave a Comment Cancel Reply