CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
kneidels
kneidels

Reputation: 914

jquery validate() not accepting datepicker format

Using jQuery datepicker, with the dateFormat of d M, yyyy

But when there is validation on the form - this format is not accepted.

This is what I have on the form:

$(".validate").validate();
$('.datepicker').datepicker({autoclose: true, format: "d M, yyyy"});

and here is my JSFIDDLE

Thanks!

Upvotes: 0

Views: 354

Answers (1)

Sparky
Sparky

Reputation: 98718

Original Title:

"jquery validate() not accepting datepicker format"

Your date formatting issue has absolutely nothing to do with jQuery Validate. Completely remove the jQuery Validate plugin and see the same issue: jsfiddle.net/emko0hzr/2

Your Datepicker code is flawed:

$('.datepicker').datepicker({autoclose: true, format: "d M, yyyy"});

There are no such options called autoclose or format listed anywhere in the documentation for the jQuery UI Datepicker Widget.

Rather, the dateFormat option is used for formatting the date output...

$('.datepicker').datepicker({dateFormat: "d M, yy"});

Working DEMO: http://jsfiddle.net/emko0hzr/3/

NOTE: There is also no such date format as yyyy. It's yy, otherwise, this year would be displayed as "20152015".

EDIT:

As per your comment, the Datepicker pops up on the date fields. That is because these fields are flagged as "invalid" and brought into focus as per the jQuery Validate plugin. You have a maxlength="10" attribute on the date fields and the jQuery Validate plugin will automatically use these inline HTML 5 validation attributes for its rules. Since the date within the field does not meet this maxlength rule, it's flagged as invalid. The plugin will bring any invalid field into focus; and bringing your date field into focus will automatically bring up the Datepicker window. Simply remove the inline maxlength attribute and put more sensible validation rules into place.

DEMO 2: http://jsfiddle.net/emko0hzr/4/

Upvotes: 2

Related Questions