Date Of Birth Validation In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of date of birth validation in JavaScript, here we defined three input tags for collect users birth date, month, year separately.
Another input tag defined for submit button then using div tag with id ‘age’ will helps to append the result.
In function age() we calculates users age till current date by subtracting each users from date of birth to current date.
Step By Step Guide On Date Of Birth Validation In JavaScript :-
Here we defined three input fields for collects users birth day, month, year separately and using date object we gets current date and stored to some variables.
If current date lesser than user entered date then we done some calculations then subtracting birth date, month, year with current date, month, year.
Finally calculated users age result appends to div tag with id ‘age’.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Date</p>
<input type="text" name="date" id="date" required minlength="1" maxlength="2">
<p>Month</p>
<input type="text" name="month" id="month" required minlength="1" maxlength="2">
<p>Year</p>
<input type="text" name="year" id="year" required minlength="4" maxlength="4"><br><br>
<input type="submit" value="Submit" onclick="age()"><br>
<div id="age"></div>
<script>
function age(){
var d=document.getElementById('date').value;
var m=document.getElementById('month').value;
var y=document.getElementById('year').value;
var date=new Date();
var d1=date.getDate();
var m1=1+date.getMonth();
var y1=date.getFullYear();
var mth=[31,28,31,30,31,30,31,31,30,31,30,31];
if(d>d1){
d1=d1+mth[m1-1];
m1=m1+12;
y1=y1-1;
}
var d2=d1-d;
var m2=m1-m;
var y2=y1-y;
document.getElementById('age').innerHTML='Your age is '+y2+' years '+m2+' month '+d2+' days';
}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined four input tags and a div tag. For collects users birth date, month, year separately and create a submit button. The div tag used to appends result on webpage.
- When user clicks on submit button it loads ‘age()’ function within that we collected users birth date, month, year separately and stored to respective variables ‘d,m,y’.
- Then we created date object and stored to variable ‘date’. Current date collected and stored to variables ‘d1,m1,y1’ and using if condition we checks user entered birth date greater than current date.
- Otherwise we can subtract from birth date with current date so we finally gets result of users current age.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to validate date of birth in javascript.
When we executes our program on browser we can see three input fields for collect users birth date, month, year then when user clicks on submit button it loads age() function within that we calculating users current age by subtracting birth date with current date.
Finally we gets result and it is appends on div tag with id attribute ‘age’.
I hope this tutorial on date of birth validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
