Custom date format with jQuery validation plugin

Question

How can I specify a personalized date form for validation using Validation Plugin for jQuery?

Answer 1

You can create your own validation method using the addMethod function. Let's say you wanted to check "dd / mm / yyyy":

 $.validator.addMethod( "australianDate", function(value, element) { // put your own logic here, this is just a (crappy) example return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); }, "Please enter a date in the format dd/mm/yyyy." ); 

And then in your form add:

 $('#myForm') .validate({ rules : { myDate : { australianDate : true } } }) ; 

Answer 2

The answer to nickf is good, but note that the validation plugin already includes validators for several other date formats in the file for additional .js methods. Before you write yourself, make sure that someone else has not done so.

Answer 3

I personally use the very good library http://www.datejs.com/ .

Docco is here: http://code.google.com/p/datejs/wiki/APIDocumentation

You can use the following to get your Australian format and confirm leap day 02/29/2012, not 02/29/2011:

 jQuery.validator.addMethod("australianDate", function(value, element) { return Date.parseExact(value, "d/M/yyyy"); }); $("#myForm").validate({ rules : { birth_date : { australianDate : true } } }); 

I also use a masked input plugin to standardize data http://digitalbush.com/projects/masked-input-plugin/

 $("#birth_date").mask("99/99/9999"); 

Answer 4

Here is an example of a new validation method that will validate almost any date format, including:

• dd / mm / yy or dd / mm / yyyy
• dd.mm.yy or dd.mm.yyyy
• dd, mm, yy or dd, mm, yyyy
• dd mm yy or dd mm yyyy
• dd-mm-yy or dd-mm-yyyy

Then when you pass the php value you can convert it with strtotime

Here's how to add a method:

  $.validator.addMethod("anyDate", function(value, element) { return value.match(/^(0?[1-9]|[12][0-9]|3[0-1])[/., -](0?[1-9]|1[0-2])[/., -](19|20)?\d{2}$/); }, "Please enter a date in the format!" ); 

Then you add a new filter with:

 $('#myForm') .validate({ rules : { field: { anyDate: true } } }) 

;

Answer 5

Here is an example of code that recently worked for me:

 // Replace the builtin US date validation with UK date validation $.validator.addMethod( "date", function ( value, element ) { var bits = value.match( /([0-9]+)/gi ), str; if ( ! bits ) return this.optional(element) || false; str = bits[ 1 ] + '/' + bits[ 0 ] + '/' + bits[ 2 ]; return this.optional(element) || !/Invalid|NaN/.test(new Date( str )); }, "Please enter a date in the format dd/mm/yyyy" ); 

I should note that this actually replaces the built-in date check procedure, although I could not see that this should cause a problem with the current plugin.

Then I applied this to the form using:

 $( '#my_form input.date' ).rules( 'add', { date: true } ); 

Answer 6

This is me, combining / modifying previous posts to achieve the desired result:

  // Override built-in date validator $.validator.addMethod( "date", function (value, element) { //Return NB: isRequired is not checked at this stage return (value=="")? true : isDate(value); }, "* invalid" ); 

Add date confirmation after verification configuration. That is, after calling the $ (form) .validate ({...}) method.

  //Add date validation (if applicable) $('.date', $(frmPanelBtnId)).each(function () { $(this).rules('add', { date: true }); }); 

Finally, the main function of isDate Javascript, modified for the UK date format

 //Validates a date input -- http://jquerybyexample.blogspot.com/2011/12/validate-date- using-jquery.html function isDate(txtDate) { var currVal = txtDate; if (currVal == '') return false; //Declare Regex var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/; var dtArray = currVal.match(rxDatePattern); // is format OK? if (dtArray == null) return false; //Checks for dd/mm/yyyy format. var dtDay = dtArray[1]; var dtMonth = dtArray[3]; var dtYear = dtArray[5]; if (dtMonth < 1 || dtMonth > 12) return false; else if (dtDay < 1 || dtDay > 31) return false; else if ((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31) return false; else if (dtMonth == 2) { var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0)); if (dtDay > 29 || (dtDay == 29 && !isleap)) return false; } return true; } 

Answer 7

John, you have syntax errors, see below, this worked for me.

  <script type="text/javascript"> $(document).ready(function () { $.validator.addMethod( "australianDate", function (value, element) { // put your own logic here, this is just a (crappy) example return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); }, "Please enter a date in the format dd/mm/yyyy" ); $('#testForm').validate({ rules: { "myDate": { australianDate: true } } }); }); 

Answer 8

Check out: jQuery Masked Input Plugin

Answer 9

 $.validator.addMethod("mydate", function (value, element) { return this.optional(element) || /^(\d{4})(-|\/)(([0-1]{1})([1-2]{1})|([0]{1})([0-9]{1}))(-|\/)(([0-2]{1})([1-9]{1})|([3]{1})([0-1]{1}))/.test(value); }); 

you can enter as yyyy-mm-dd also yyyy/mm/dd

but cannot judge the size of the month in February, in just 28 or 29 days.

Answer 10

Easy example: valid for automatic HTML5 = "date" format.

 <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script> <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.min.js"></script> <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/localization/messages_es.js"></script> $(function () { // Overload method default "date" jquery.validate.min.js $.validator.addMethod( "date", function(value, element) { var dateReg = /^\d{2}([./-])\d{2}\1\d{4}$/; return value.match(dateReg); }, "Invalid date" ); // Form Demo jquery.validate.min.js $('#form-datos').validate({ submitHandler: function(form) { form.submit(); } }); }); 

Answer 11

@blasteralfred:

I received the following rule confirming the correct date for me (DD MM YYYY)

 jQuery.validator.addMethod( "validDate", function(value, element) { return value.match(/(?:0[1-9]|[12][0-9]|3[01]) (?:0[1-9]|1[0-2]) (?:19|20\d{2})/); }, "Please enter a valid date in the format DD MM YYYY" 

);

For DD / MM / YYYY

 jQuery.validator.addMethod( "validDate", function(value, element) { return value.match(/(?:0[1-9]|[12][0-9]|3[01])\/(?:0[1-9]|1[0-2])\/(?:19|20\d{2})/); }, "Please enter a valid date in the format DD/MM/YYYY" 

);

This will not be confirmed on 01 13 2017 and 01/13/2017.

And also does not confirm 50 12 2017 and 50/12/2017.