Bootstrap datepicker and bootstrap validator

Question

I am using the bootstrap datepicker from here and the bootstrap validator from here. Also I am using bootstrap v3.1.1.

After selecting a date from datepicker the validator does not react. It works just when I use the keyboard to enter a date.

Here is my HTML code:

<form id="myForm" method="POST"> 
   <div class="col-lg-3">
     <div class="form-group">
        <input name="endDate" type="text" class="datepicker form-control">
     </div>
   </div>
</form>

In .js file I added:

$(document).ready(function () {
  $('.datepicker').datepicker();
)};

and for validators:

$(document).ready(function () {
    $('#myForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            endDate: {
                validators: {
                    date: {
                        format: 'DD/MM/YYYY',
                        message: 'The format is dd/mm/yyyy'
                    },
                    notEmpty: {
                        message: 'The field can not be empty'
                    }
                }
            }
        }
    });
});

Solution 1

When using BootstrapValidator with Bootstrap-datetimepicker or Bootstrap-datepicker, you should revalidate the date field.

So you should add this:

1) using with bootstrap-datetimepicker :

$('.date')
    .on('dp.change dp.show', function(e) {
        // Revalidate the date when user change it
        $('#myForm').bootstrapValidator('revalidateField', 'endDate');
});

2) using with bootstrap-datepicker :

$('.datepicker')
    .on('changeDate show', function(e) {
        // Revalidate the date when user change it
        $('#myForm').bootstrapValidator('revalidateField', 'endDate');
});

See the datetimepicker example for more information.

Solution 2

Somehow, after selecting a date, datepicker() loses focus of the date field and none of the validator plugins can see the date input field as filled (valid). As a conclusion, a simple .focus() does the trick.

$('#datefield').datepicker({
  //datepicker methods and settings here
}).on('changeDate', function (e) {
  $(this).focus();    
});

Solution 3

Above accepted answer didn't work me. What worked for me was very simple.

$('#datefield').datepicker().on('changeDate', function (e) {
         $('#datefield').focus();
         $('#anyotherfield').focus();
         $('#datefield').focus();             
});

Hope this helps!

Comments

[Youans]

I have an issue that data.bv.isValid() is always false

[Arkni]

@YouYou please create a new question or create an issue on the proper repository at github.com/nghuuphuoc/bootstrapvalidator/issues/new

[Roger Dodger]

boy, you're simple yet clever solution saved me a major case of heart burn! Muchas gracias! :)

[Roger Dodger]

Actually, I spoke too soon. Adding the .focus() seemed to solve the issue but it really didn't - the invalid class was being removed w/ it but the validate plugin still considered the field as invalid!

[Aaron Marton]

@RogerDodger, which validator plugin are you using?

[Roger Dodger]

The one at jqueryvalidation.org - what fixed it was the solution provided by @Sparky on another SO thread, instead of $(this).focus() , I used $(this).valid(). That did the trick.

[Irf]

Aey, mind adding some description.. See How do I write a good answer, Welcome to Stack Overflow !