Home > Uncategorized > How to validate Date of Birth with jQuery

How to validate Date of Birth with jQuery


In a recent project I had to implement what’s commonly referred to as a Legal Drinking Age (LDA) page. Basically what needs to happen is that the user has to enter their date of birth and thus ‘confirm’ that they are of a legal drinking age for their respective country. You can view an example of just such a page here.

This brought me to an interesting requirement – the user needs to enter their birth of date (in this case via 3 select boxes), their age then needs to be calculated from the entered date and they are either granted, or denied access based on the result.

Interestingly enough, after having a quick look around I hadn’t been able to find any similar example, so I had to come up with something myself. The following code is my solution :

$(“#lda-form”).submit(function(){
var day = $(“#day”).val();
var month = $(“#month”).val();
var year = $(“#year”).val();
var age = 18;

var mydate = new Date();
mydate.setFullYear(year, month-1, day);

var currdate = new Date();
currdate.setFullYear(currdate.getFullYear() – age);
if ((currdate – mydate) < 0){ alert("Sorry, only persons over the age of " + age + " may enter this site"); return false; } return true; }); [/sourcecode] First, we get the relevant entered date values - the “day”, “month” and “year”. I’ve also added an “age” var so that this can be easily edited if necessary – the current value is set to 18.

Next we create a Date object and call it “mydate”. We then use the object’s “setFullYear” method to set the value of “mydate” to the user’s entered birth date. You can view more information about this method here. The only thing to notice here is that we have subtract 1 from the “month” value as it’s 0 indexed.

Now that we have the user’s birth date sorted, we then create another Date object and call it “currdate”. The default value for “currdate” is the current date. We then set “currdate” to whatever the current date is minus our “age” value – i.e. Today – 18 years. Once again, we use the “setFullYear” method to set the date. However, to get the current date in a useable format, we use the “getFullYear” method and THEN subtract 18 from the resulting value. So to do this we use “currdate.getFullYear() – age”.

Once we have the date of 18 years ago and the user’s birth date, both in the same format, it’s simply a matter of making sure that the required date minus the birth date isn’t greater than 0. If so, we output an alert to inform the user then return “false” to make sure that the form doesn’t get submitted.

Pretty straightforward.

Advertisements
Categories: Uncategorized
  1. August 4, 2010 at 10:43 pm

    I’m trying to adapt this very helpful code into a door.php file for my site. Basically I’m missing the server side code for this. Suggestions?

  2. Hary
    January 13, 2012 at 2:21 pm

    thanxs its really helpfull……………………..

  3. June 25, 2012 at 9:51 pm

    This is very helpful. But what do you do about Cookies?

  1. December 14, 2009 at 6:09 pm
  2. December 15, 2009 at 4:10 am
  3. December 21, 2009 at 1:53 am
  4. January 17, 2010 at 4:37 pm
  5. January 21, 2010 at 10:33 am
  6. February 12, 2010 at 11:52 am
  7. February 20, 2010 at 10:04 am
  8. February 28, 2010 at 5:01 am
  9. November 30, 2010 at 7:25 pm
  10. June 24, 2011 at 11:16 pm

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

%d bloggers like this: