There will be two types of Validations:
1. Date format
dd/MM/yyyy validation: The Date of Birth (DOB) will be first validated for
dd/MM/yyyy format using
Regular Expression (Regex).
2. 18+ Minimum Age validation: The difference between the age entered in the
TextBox and the Current Date is minimum 18 years.
HTML Markup
The
HTML Markup consists of following elements:
TextBox – For capturing the date.
SPAN – For displaying error message.
Button – For validating the date in the
TextBox.
The
Button has been assigned with a
JavaScript onclick function.
<input type="text" id="txtDate" onblur="ValidateDOB()" />
<span class="error" id="lblError"></span>
<br /><br />
<input type="button" id="btnValidate" value="Validate" onclick="return ValidateDOB()" />
Validating Date of Birth and 18+ Minimum Age in dd/MM/yyyy format using JavaScript
When the
Submit Button is clicked, the
ValidateDOB JavaScript function is executed.
If test result is succeeded then, a check is performed if the user is eighteen years old or not by comparing current date and birth date.
If the Age is less than 18 then it will return FALSE and SPAN for displaying Error Message is set to empty.
If the entered date is not in dd/MM/yyyy format then, the Error Message is displayed.
<script type="text/javascript">
function ValidateDOB() {
var lblError = document.getElementById("lblError");
//Get the date from the TextBox.
var dateString = document.getElementById("txtDate").value;
var regex = /(((0|1)[0-9]|2[0-9]|3[0-1])\/(0[1-9]|1[0-2])\/((19|20)\d\d))$/;
//Check whether valid dd/MM/yyyy Date Format.
if (regex.test(dateString)) {
var parts = dateString.split("/");
var dtDOB = new Date(parts[1] + "/" + parts[0] + "/" + parts[2]);
var dtCurrent = new Date();
lblError.innerHTML = "Eligibility 18 years ONLY."
if (dtCurrent.getFullYear() - dtDOB.getFullYear() < 18) {
return false;
}
if (dtCurrent.getFullYear() - dtDOB.getFullYear() == 18) {
//CD: 11/06/2018 and DB: 15/07/2000. Will turned 18 on 15/07/2018.
if (dtCurrent.getMonth() < dtDOB.getMonth()) {
return false;
}
if (dtCurrent.getMonth() == dtDOB.getMonth()) {
//CD: 11/06/2018 and DB: 15/06/2000. Will turned 18 on 15/06/2018.
if (dtCurrent.getDate() < dtDOB.getDate()) {
return false;
}
}
}
lblError.innerHTML = "";
return true;
}else {
lblError.innerHTML = "Enter date in dd/MM/yyyy format ONLY."
return false;
}
}
</script>
Screenshot
![Implement dd/MM/yyyy Date Validation in JavaScript]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
