Date Of Birth Validation In jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Amruta
In this article we will show you the solution of date of birth validation in jQuery, here we needs to use simple calculation and val() method for achieve the result.
As we know for calculate age calculation we needs to subtract current date with date of birth then we can display anyone’s age too simple for that we used val() method for collects users date of birth value then printed their age with message.
Step By Step Guide On Date Of Birth Validation In jQuery :-
At html block, we defined h1,three input elements, p, button ‘Submit’ and h4 elements for fetch users date of birth and display result or error on webpage.
Then in script block we collecting date, month, year from users then we validating users input by using if condition then we printing result, otherwise we needs to print error on webpage.
Here needs to verify users year input enough to verify whether date of birth valid or not because they gave above current year then will be considered as wrong input.
<!DOCTYPE html>
<html>
<head>
<title>DATE OF BIRTH</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
var v1=$('#d').val();
var v2=$('#m').val();
var v3=$('#y').val();
var cdt=new Date();
var d=cdt.getDate();
var m=cdt.getMonth()+1;
var y=cdt.getFullYear();
if(!(v3>=y)){
var dres=d-v1;
var mres=m-v2;
var yres=y-v3;
console.log(yres+"Years Old");
$('h4').text("User Age Is..."+yres);
}
else{
$('h4').text("Invalid Please Verify Year...");
}
})
});
</script>
<body>
<h1>Enter Input Less Than Current Date</h1>
<input type="text" id="d" placeholder="Enter Birth Date">
<input type="text" id="m" placeholder="Enter Birth Month">
<input type="text" id="y" placeholder="Enter Birth Year">
<p>Note: Don't test with invalid inputs..</p>
<button>Submit</button>
<h4></h4>
</body>
</head>
</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 contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- 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.
- In html block we defined h1 tag for display heading, three input fields for collect users date of birth values separately, p tag for display noted point and button ‘Submit’, h4 for appends dynamic result on webpage.
- In script block we usually ready() method always in get ready state when loaded on browser and click method appended with button element for proceeds process when click event generated when user clicks on it.
- Within this date, month, year of users date of birth detail fetched separately by input fields and if condition checks whether year below current year otherwise it is error.
- In if next we subtracting date, month, year with current date then each values stored n respective variables ‘dres,mres,yres’ then result year ‘yres’ printed on both console and webpage using h4 tag.
- 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 jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see ‘Enter Input Less Than Current Date, three input fields, Note: Don't test with invalid inputs..,’ and button ‘Submit’, now user needs to provide their date of birth date on respective input fields then needs to click on button and we can see result like ‘User Age Is...24’.
I hope this article on date of birth validation in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
