How to validate Date of Birth with jQuery
Monday, March 9th, 2009
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;
});
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.
If you enjoyed this article, you might consider subscribing to our rss feed to stay updated with all the latest tips and articles!
Article Sponsored by:
The Ultimate Image Gallery Manager was created by Drew Douglass, the site editor here at Dev-Tips. The Ultimate Gallery is installed directly on your server, just like WordPress or a CMS. It quickly and easily allows you to manange thousands of image galleries and images from it's easy to use backend admin panel. It's also packed full of photo editing features. Available exclusively on ThemeForest.
ABOUT THIS AUTHOR
11 Comments
subscribe comments feedLeave a Reply
Popular Series
Related Posts
its awesome, i guess same time you should make a server-side validation to, because once the clients end browser disabled the javascript the jQuery will not work, so as a suggestion back end also needed
Hi Yoosuf,
Thanks for the comment. Using server-side validation would be critical yes, hence the use of a form.
Perhaps my next tip would be the back-end version of this script – thanks for the idea
Awesome!!!!
Thanks a lot for this one, I used this within the jQuery validation library as a custom method…could probably do with a tidy up but it works
$.validator.addMethod('check_date_of_birth', function(value, element) {
var day = $("#date_of_birth_day").val();
var month = $("#date_of_birth_month").val();
var year = $("#date_of_birth_year").val();
var age = $.cookie('gwLegalAge') || 21;
var mydate = new Date();
mydate.setFullYear(year, month-1, day);
var currdate = new Date();
currdate.setFullYear(currdate.getFullYear() - age);
return (currdate - mydate < 0 ? false : true);
});
I did a similar project as well, just validating the date is valid. Here is what I put together.
cut out my code…
function validate_date($separator, $date) {
list($m, $d, $y) = explode($separator, $date);
$dateCheck = checkdate($m, $d, $y);
if($dateCheck == 1) { // date is valid!
//setup your return variable
}
}
// $date is in month, day, year format
$date = '2/19/1984';
$separator = '/';
$checkDate = validate_date($separator, $date);
this code is not working,i think i have some problem in my coding. i got error
Hi, thanks for the great tip. I’ve used it to create an LDA form on a site i’m working on and it works great.
I’ve been trying to add a function to create a cookie with the age when the form is submitted, so it can be checked throughout the site, but haven’t been able to get it working so far – If anyone has any advice i’d love to hear it!
Cheers
Hi I’ve been trying to validate and post a birth date into my db but no sucess. Can someone help me please. I can post the values except the date of birth that is not recognized as it is posted in this format: DD MM YYYY. So i need to convert it into US format to be accepted by mysql. I have tried explode () but was not able to make it work
Here is my code:
THANKS A LOT
Anna
thanks for this tip
Thats great, but i have two problems,
1. What happens if my birthday is a leap year
2. How did you get it so it would on let you select 31st of august etc. and then the next month onle has 28 days in it, seems like you would have to hack this out no?