CODEWITHSUNDEEP
javascriptjqueryvalidationdatepickertwitter-bootstrap-2
Limon
Limon

Reputation: 1793

bootstrap datepicker plugin issue

I use a template that uses Bootstrap 2. That template has the datepicker plugin and the validation field plugin.

I need to get the date user entered from datepicker so I can validate it. Problem is that It's not reading it at once, I have to click twice in order to do this. So because of this, integration with validation plugin is not working as it should work. It validates after the second click I mention...What can be wrong?

html snippet:

<div class="span6">
  <div class="control-group">
    <label class="control-label">V&aacute;lido Desde<span class="required">*</span></label>
      <div class="controls">
        <div class="input-icon left">
          <i class="icon-calendar"></i>
            <input class="m-wrap m-ctrl-medium date-picker" size="16" type="text" value="{$okInfo['start_date']}" placeholder="dd/mm/yyyy" id="start_date" name="start_date" data-date="" data-date-format="dd/mm/yyyy"/>
         </div>    
       </div>
     </div>
   </div>

then I have a js file from the plugin (snippet):

if (jQuery().datepicker) {
  $('.date-picker').datepicker({
    rtl : App.isRTL(),
    autoclose: true,
  });
}

and finally the validation file:

var FormValidation = function () {

var handleValidation2 = function() {

var form2 = $('#form_sample_2');
var error2 = $('.alert-error', form2);
var success2 = $('#myModal', form2);

    form2.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-inline', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",
        onfocusout: function (element) {
            $(element).valid();
        },               
        rules: {
            start_date: {
                required: true,
                valid_date: true
            },
        },

Upvotes: 1

Views: 500

Answers (1)

Nick
Nick

Reputation: 105

I think the issue with this might be to do with the validation call happening onfocusout.

jQueryUI will also be updating the text box with the date onfocusout, so technically the box is at that time empty and there is nothing to validate?

Try adding a timeout on the validation, something a little like this? (untested!!)

onfocusout: function (element) {
    setTimeout(function(element){
        $(element).valid();
    },1000);
},

The code should run the same command as before, but after a 1 second delay.

Upvotes: 3

Related Questions