Validating bootstrap datepicker from bootstrap formhelpers

Question

Is it possible to use the JQuery Validation to validate the Bootstrap Datepicker? As it doesn't expose the input field, I can't get it to validate.

Example: https://jsfiddle.net/Khrys/2rcr9j5s/

$.validator.setDefaults({
   submitHandler: function() {
      form.submit()
   }
});


$().ready(function() {
var container = $('div.containerx');

    $("#Form").validate({
        ignore: [],
        messages: {
            StartTime: {
                required: "Select the StartTime."
            }
        },
        errorContainer: container,
        errorLabelContainer: $("span", container),

        highlight: function ( element, errorClass, validClass ) {
            $('#StartTime').addClass( "btn-danger" );
            $('#Filter').addClass( "btn-danger" );
        },
        unhighlight: function ( element, errorClass, validClass ) {
            $('#StartTime').removeClass( "btn-danger" );
            $('#Filter').removeClass( "btn-danger" );
        }
    });
});

Update:

Class btn-danger needs to be applied to the element correctly.

https://jsfiddle.net/2rcr9j5s/4/

Have updated the fiddle and have set the datepicker to be required — Sanchit, Dec 14 '15 at 12:51

score 1 · Answer 1 · answered Dec 14 '15 at 12:56

1

Have updated the fiddle: https://jsfiddle.net/2rcr9j5s/1/

                $.validator.setDefaults({
                submitHandler: function() {
                    form.submit()
                }
            });

            $().ready(function() {

                var container = $('div.containerx');

                $("#Form").validate({
                    ignore: [],
                    rules:{
                       StartTime: {
                            required: true
                        }
                    },
                    messages: {
                        StartTime: {
                            required: "Select the StartTime."
                        }
                    },
                    errorContainer: container,
                    errorLabelContainer: $("span", container),

                    highlight: function ( element, errorClass, validClass ) {
                        $('#StartTime').addClass( "btn-danger" );
                        $('#Filter').addClass( "btn-danger" );
                    },
                    unhighlight: function ( element, errorClass, validClass ) {
                        $('#StartTime').removeClass( "btn-danger" );
                        $('#Filter').removeClass( "btn-danger" );
                    }
                });
            });

Set the datepicker to be required.

Was this what you needed?

answered Dec 14 '15 at 12:56

Sanchit

541
2
18

Thanks for your time. The example you provided is adding the btn-danger to the whole div, so it lose the rounded corners. I have updated the example with your suggestions, but still needs the class to be applied properly. – Khrys Dec 18 '15 at 10:38
On what element do you need the class to be applied? Currently(in your updated fiddle), it is being on the input element.. Please clarify – Sanchit Dec 21 '15 at 05:07
It is not in the `input` it is in a div. Should be in the input. Thanks. – Khrys Dec 21 '15 at 13:08
Have updated the fiddle.. Check. Have made changes in `highlight` and `unhighlight` sections – Sanchit Dec 21 '15 at 13:41
Where is the new link? – Khrys Dec 21 '15 at 14:13
Sorry...my mistake.. This is the new link: https://jsfiddle.net/SanchitSahu/2rcr9j5s/6/ – Sanchit Dec 22 '15 at 05:01
But the input field did not get red, only if I click on it. – Khrys Dec 22 '15 at 10:00
Sorry but didn't get you.. Do you mean that the input should be default red on page load OR the color is doesn't get red when clicked on 'insert' button OR anything else? – Sanchit Dec 22 '15 at 10:36

score 0 · Answer 2 · answered Oct 02 '16 at 00:07

According your code it appears that the input element is not in active state so we have to make it active first when highlight function is called.So we can add an active class to make it active first then apply btn-danger class. So your code should be like

highlight: function ( element, errorClass, validClass ) {
          $(element).addClass( "active" );
          $(element).addClass( "btn-danger" );
          $('#Filter').addClass( "btn-danger" );
        },
unhighlight: function ( element, errorClass, validClass ) {
          $(element).removeClass( "active" );
          $(element).removeClass( "btn-danger" );
          $('#Filter').removeClass( "btn-danger" );
        }

Updated fiddle is :https://jsfiddle.net/anulesh91/2rcr9j5s/10/

score 0 · Answer 3 · answered Feb 08 '17 at 13:56

Your update fiddle : https://jsfiddle.net/2rcr9j5s/4/

Is absolutely fine and jQuery validator is validating it just becasue of btn-danger class the text inside input box is white. you just need to add

color: black; to that input box and rest of the code is working fine.

score 0 · Answer 4 · answered Jul 21 '17 at 22:50

I never used this plugin but I did take a quick look at the documentation and there is a way you can write HTML and the javascript so that you have control of creating your own input field. However, I will just try to answer your question as is, so you don't spend much time moving code around.

To answer your question, if you inspect element in your browser, you will see that the input name is "StartTime".

So all you really need to do is on submit of this form get the value for that input name and validate it. If it is a good value do nothing. else prevent the submit.

var value = $("input[name='StartTime']").val();

Now the variable value has the value for that input field. You can validate it however you want. Make sure it's not empty, write a regular-expression to make sure it's good format and numbers make sense. You have the value you can do whatever you want with it. The sky is the limit.

I hope that helped.

score -1 · Answer 5 · answered Mar 10 '16 at 06:02

You can't use javascript to validate. Use jquery. try this.

$.validator.setDefaults({
                    submitHandler: function() {
//////////////////////////// you can write your validation/////////////////////////////          

          var x = $("[name=StartTime]").val();
          alert(x);
///////////////////////////////////////////////////////////////////////////////////////          
                        form.submit();
                    }
                });

                $().ready(function() {

                    var container = $('div.containerx');

                    $("#Form").validate({
                        ignore: [],
                        messages: {
                            StartTime: {
                                required: "Select the StartTime."
                            }
                        },
                        errorContainer: container,
                        errorLabelContainer: $("span", container),

                        highlight: function ( element, errorClass, validClass ) {
                            $('#StartTime').addClass( "btn-danger" );
                            $('#Filter').addClass( "btn-danger" );
                        },
                        unhighlight: function ( element, errorClass, validClass ) {
                            $('#StartTime').removeClass( "btn-danger" );
                            $('#Filter').removeClass( "btn-danger" );
                        }
                    });
                });

you can validate against "x". – Rahul Kant Mar 10 '16 at 06:04 — Rahul Kant, Mar 10 '16 at 06:04

Validating bootstrap datepicker from bootstrap formhelpers

5 Answers5