Extending jQuery validation plugin with custom date check

For a client I had to use the jQuery validation plugin, which seems like a decent client side form validation method. You can check basic things on your form values. You can read the details at their site, but basically you do something like:

$("#formID").validate({
	rules:  {
			firstname: "required",
			lastname: "required",
			username: {
				required: true,
				minlength: 2
			}
		}
});

I was searching to see if you could check the date in a certain format, when I found that you can easily add your own validation function, not too shabby!

You can build your own validation functions with the addMethod option:

	$.validator.addMethod("checkDate", function(value) {
		// Check the date format is dd-dd-dddd
		var regEx = /^\d{2}-\d{2}-\d{4}$/;
		var reversedDate = value.split('').reverse().join('');
		if( value.match(regEx) === null )
		{
			return false;
		}
		// Use Date.parse to weed out dates like 99-99-2015
		if( Date.parse(reversedDate) === 'NaN' )
		{
			return false;
		}
		return true;
	}, "Message when form does not validate!");

As you can see I needed to reverse the date to follow the Date.parse format, I quickly hacked this together, so maybe I am overlooking a simpler, better, solution, but this seems to work just fine for now.

Now you can do something like:

$("#formID").validate({
	rules: {
			datefield: {
				required: true,
				checkDate: true
			}
		}
});

And that is all there is to it!

Victor

Living in Europe as a freelance programmer. Interested in programming in general, web development and machine learning in particular. Currently most used language is PHP, also experienced in JAVA.

You may also like...

2 Responses

  1. Hey Victor ! Thank you for visiting Netdiggers and sending us a valuable tip about this post. I’ve added a link in the description and hope someone might find it helpful ! Thanks again :) How about a tweet ?

  2. Victor says:

    You are welcome! I have sent out a tweet mentioning your article, you can find my among your followers now…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>