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

<!DOCTYPE html>
<html>
<head>
<link href=”datepicker.css” rel=”stylesheet”/>
<script src=”http://code.jquery.com/jquery-latest.min.js”></script>
<script src=”datepicker.js”></script>
<script src=”birthchecker.js”></script>
<title>jQuery Birthday Form Field & Checker</title>
</head>
<body>
<div id=”content” style=”margin-top:10px;height:100%;”>
<center><h1>jQuery Birthday Form Field & Checker</h1></center>
<form method=”POST” action=”submit.php”>
<table><tbody>
<tr>
<td>Birthday :</td>
<td><input id=”birth” name=”birth” value=”2000-01-20″/><div id=”ermsg”>Users under 13 are not allowed.</div></td>
<td>YY-MM-DD</td>
</tr>
<tr>
<td></td>
<td><input type=”submit”/></td>
</tr>
</tbody></table>
</form>
</div>
<style>
input{
border:none;
padding:8px;
}
#ermsg{
display:none;
color:red;
}
</style>
<!– http://www.subinsb.com/2013/10/add-simple-birthday-field-in-form-jquery-and-validate-in-php.html –>
</body>
</html>

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.<br/><a href=’index.php’>Click Here To Go To Demo Form</a>”;
}
?>

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