How to solve Jquery Datepicker Validation issue?

Question

I did jquery validation on my form in play framework which is working properly when i directly click on submit button without entering values in textboxes validation messages come. But the issue is, when i am selecting a date from datepicker(bootstrap-datepicker.js), validation message does not disappear for date field. after clicking twice it disappears. please help me.

Jquery Code:
$("form input.date").datepicker({
        autoclose: true,
        onClose: function() {
            $(this).valid();
        }

});

Validation Function:
$("#register").validate({
        focusCleanup: true,
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                number:true,
                minlength:10,
                maxlength:10
            },                
            date:{
                required: true,
                date: true
            }                
        },
        messages: {
            name: "Please provide your full name",
            email: {
                required: "Please provide your email address",
                email: "Please provide a valid email address"
            },
            phone: {
                required: "Please provide your mobile number",
                number: "Please provide a valid mobile number",
                minlength:"Please provide a valid mobile number",
                maxlength:"Please provide a valid mobile number"
            },               
            date: {
                required: "Please select date ",
                date: "Please select valid date"
            }                
        },
        submitHandler: function(form) {
        }
});

Please provide more information

Philipp M
– Philipp M

2013-09-20 11:00:03 +00:00
Commented Sep 20, 2013 at 11:00 — Philipp M
– Philipp M, Commented Sep 20, 2013 at 11:00

MJ_Wales · Accepted Answer · 2018-04-27 11:03:26Z

1

I experienced the same issue and found a solution here: jQuery validator and datepicker click not validating

Op was very close, issue resolved with following (modified) code from user Sparky:

   $("#datepicker").datepicker({
         autoclose: true,
         dateFormat: 'dd/mm/yy',
   }).change(function() {
         $(this).valid();  // triggers the validation test        
   });

answered Apr 27, 2018 at 11:03

MJ_Wales

9052 gold badges8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gandalf · Accepted Answer · 2013-09-20 11:26:52Z

0

you should specify when your validation function will be executed, there is 'keyup' which execute your function when you finish the inputs filling. this is the documentation keyup. you verify your the date and if it's correct you use the function hide(), but remember the validation code should be inside keyup()

answered Sep 20, 2013 at 11:26

gandalf

4702 gold badges6 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to solve Jquery Datepicker Validation issue?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related