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:
At ThemeForest you can buy and sell site templates and themes to skin popular CMS products like WordPress, Drupal and Joomla. Files are priced from just five dollars, based on the complexity, quality and use of the file. Check it out today!
ABOUT THIS AUTHOR
7 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);
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