How To Add A Simple Birthday Field In A Form Using jQuery


Read {count} times since 2020

There are certain laws on the Web. One of them is the COPPA law which clarifies the minimum age of a user to signup for a site. The minimum age is 13. If any site allows users under 13 to signup, it is considered illegal. So it’s necessary to add a birthday field in site’s Sign-Up form. So I’m going to tell you how to add a simple, stylish birthday field to your Sign-Up form.

Extract datepicker.js and datepicker.css from the archive downloadable from above link. Create index.php (Containing Form) & birthchecker.js.

index.php








jQuery Birthday Form Field & Checker



jQuery Birthday Form Field & Checker













Birthday : Users under 13 are not allowed. YY-MM-DD






birthchecker.js

$(document).ready(function(){
v=$(‘#birth’);
function above13(v){
cur=new Date();
cls=new Date(v.val());
age = new Date(cur – cls).getFullYear() – 1970;
console.log(age);
if(age<13){
v.css("background","red");
$("#ermsg").show();
}else{
v.css("background","white");
$("#ermsg").hide();
}
}
v.DatePicker({
format:’Y-m-d’,
date: v.val(),
current: v.val(),
starts: 1,
position: ‘r’,
onBeforeShow:function(){
v.DatePickerSetDate(v.val(), true);
},
onChange:function(formated, dates){
v.val(formated);
v.DatePickerHide();
above13(v);
}
});
v.on("keyup",function(){
above13(v);
});
});

submit.php

function age($birthday){
list($day,$month,$year) = explode("/",$birthday);
$year_diff  = date("Y") – $year;
$month_diff = date("m") – $month;
$day_diff   = date("d") – $day;
if ($day_diff < 0 && $month_diff==0){$year_diff–;}
if ($day_diff < 0 && $month_diff < 0){$year_diff–;}
return $year_diff;
/* http://www.subinsb.com/2013/05/the-best-age-calculation-code-in-php.html */
}
$birth=$_POST[‘birth’];
if(isset($_POST) && $birth!="){
$birth=explode("-",$birth);
$nbir=$birth[2]."/".$birth[1]."/".$birth[0];
$age=age($nbir);
echo "Your Age is $age.
Click Here To Go To Demo Form";
}
?>

That’s all. If you have any problems / suggestions / feedback, comment it. I am here 10/7.

Show Comments