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/

Tactile

Have updated the fiddle and have set the datepicker to be required – Liddie

Answer 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?

Liddie

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. – Tactile

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 – Liddie

It is not in the input it is in a div. Should be in the input. Thanks. – Tactile

Have updated the fiddle.. Check. Have made changes in highlight and unhighlight sections – Liddie

Where is the new link? – Tactile

Sorry...my mistake.. This is the new link: jsfiddle.net/SanchitSahu/2rcr9j5s/6 – Liddie

But the input field did not get red, only if I click on it. – Tactile

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? – Liddie

Answer 2

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/

Cabezon

Answer 3

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.

Emcee

Answer 4

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.

Sexagesima

Answer 5

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" );
                        }
                    });
                }); 

Mundane

you can validate against "x". – Mundane