Adult validation using javascript
Introduction: Hello Guys, “Welcome back” Today, I am here with another one new great article. In this article I am going to explain about how to validate Date 18+ Minimum Age validation. Adult validation in JavaScript typically involves verifying that a user meets a minimum age requirement, commonly 18 years old. This is primarily achieved by comparing a user's provided date of birth with the current date to determine if they are of legal age. Here I will use the difference between the age entered by the user in the textbox and the Current Date using JavaScript. If entered date by the user and the current date (today date) difference will be below 18 years then it will display message that you are not Adult Now.
Implementation:
· Date format dd/MM/yyyy validation: The Date of Birth will be first validated for dd/MM/yyyy format using Regular expression
· 18+ Minimum Age validation: The difference between the age entered in the TextBox and the Current Date is minimum 18 years.
Code of HTML page
On the HTML page i will place a textbox to enter Date of Birth by the user with the id named txt_dob. i will also place a span for display the message. i will also place a Button with the id named btn_Submit and here i assigned a Javascript OnClick event handler to the button.
<input type="text" id="txt_dob" onblur="Check_dob()" />
<span class="error" id="lbl_message"></span>
<br /><br />
<input type="button" id="btn_submit" value="Validate" onclick="return Check_dob()" />
Validation Date of Birth as well as 18+ Minimum Age in dd/MM/yyyy format using JavaScript
When click on the Submit Button, then the check_dob javascript function will be work or execute.
In the check dob javascript function, the entered date is catch from the TextBox and the value entered by the user will be tested using expression.
If the fetched result will be ok then, a condition will be is work on the eighteen years old or current date and birth date which will entered by the user.
If the entered Age by the user will be 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 check_dob() {
var lbl_Errormessage = document.getElementById("lbl_message");
//Get the date from the TextBox.
var dateString = document.getElementById("txt_dob").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 = "You are not Aduly Yet."
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;
}
}
}
Lbl_Errormessage.innerHTML = "";
return true;
} else {
lbl_message.innerHTML = "Please enter date in dd/MM/yyyy format ONLY."
return false;
}
}
</script>
Now here i am writing the complete code of the HTML page. You can copy the whole code and paste the whole code at your HTML page. And enjoy the execution of the whole concept.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Validation of 18 Years</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
.error {
color: Red;
}
</style>
<script type="text/javascript">
function check_dob() {
var lbl_errormessage = document.getElementById("lbl_errormessage");
//Get the date from the TextBox.
var dateString = document.getElementById("txt_dob").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();
lbl_errormessage.innerHTML = "You are not Adult Yet."
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;
}
}
}
lbl_errormessage.innerHTML = "";
return true;
} else {
lbl_errormessage.innerHTML = "Please enter date in dd/MM/yyyy format ONLY."
return false;
}
}
</script>
</head>
<body>
<input type="text" id="txt_dob" onblur="ValidateDOB()" />
<span class="error" id="lbl_errormessage"></span>
<br /><br />
<input type="button" id="btn_submit" value="Validate" onclick="return check_dob()" />
</body>
</html>
Conclusion: In above code, I explained about how to validate Date 18+ Minimum Age validation using javascript. This code is very helpful for every developer. Bye bye and take care of you all Developers. We will come back shortly with the new article.
Regards
Using Asp.net
Comments
Post a Comment