jquery.validate Better Date Method

Posted: June 30, 2011 in JavaScript

The jquery.validate plugin currently has the validation method “date” which will correctly validate the format “xx/xx/xxxx”. However you can enter a date such as “40/01/2011” and it will pass. Obviously there is no month 40 or even day 40.

Borrowing from the “dateITA” validation method in the additional-methods.js I created a “dateUS” validation method that will detect for not only a correctly US formatted date but a valid date as well using the “mm/dd/yyyy” format.

Add this to your additional-methods.js file or load in another methods file (ex:my-methods.js):

  * Return true, if the value is a valid date, also making this formal check mm/dd/yyyy.
  * @example jQuery.validator.methods.date("01/01/1900")
  * @result true
  * @example jQuery.validator.methods.date("13/01/1990")
  * @result false
  * @example jQuery.validator.methods.date("01.01.1900")
  * @result false
  * @example <input name="pippo" class="dateUS" />
  * @desc Declares an optional input element whose value must be a valid date.
  * @name jQuery.validator.methods.dateUS
  * @type Boolean
  * @cat Plugins/Validate/Methods

	function(value, element) {
		var check = false;
		var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
		if( re.test(value)){
			var adata = value.split('/');
			var mm = parseInt(adata[0],10);
			var dd = parseInt(adata[1],10);
			var yyyy = parseInt(adata[2],10);
			var xdata = new Date(yyyy,mm-1,dd);
			if ( ( xdata.getFullYear() == yyyy ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == dd ) )
				check = true;
				check = false;
		} else
			check = false;
		return this.optional(element) || check;
	"Please enter a date in the format mm/dd/yyyy"

Use “dateUS” as your validation method.
Example: <input type=”text” class=”dateUS” name=”myDate”>

  1. James Moberg says:

    I wrote a jQuery routine to use the dateJS library and automatically convert date & time values into the correct format. It also verifies dates and times using the validation library.

    You can even enter values like “now”, “jan” and “+5” and the dates will automatically be calculated and formatted.

  2. K says:

    Chris, thx for posting. This is the first time I’ve added a method. I think it’s working “too well” ( my date never validate even when valid!!) I’m obviously calling it incorrectly. Can you help?

    $.validator.addMethod(“dateUS”,function () {});

  3. Nana says:

    I can not find a function(method) better than this. Thanks

  4. Thank you so much! This is exactly what I needed. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s