Age Range Validator using JQuery
The Age Range Validator, implemented using jQuery, ensures that users input an age within a specific range. It’s handy for online platforms where access or participation depends on age restrictions. This validator uses jQuery to interact with input fields, ensuring that the age provided meets the required criteria set by the application.
Approach
- Set up a basic HTML structure with a <form> containing an input field and a submission button. Add CSS styling to the webpage and include a jQuery CDN link.
- Utilize the ‘datepicker()’ function on the input field with the ID ‘datepicker’ to enable datepicker functionality.
- Retrieve the selected birthdate using the ‘datepicker(“getDate”)’ method.
- Calculate the user’s age by comparing it with the current date.
- Display a message based on the calculated age.
Example: The example below shows how to create an age range validator using jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Age Range Validator</title>
<link rel="stylesheet" href=
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.error {
color: red;
font-size: 14px;
}
label {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form id="ageForm">
<label for="datepicker">
Enter Your Birthdate:
</label>
<input type="text" id="datepicker"
name="birthdate">
<span id="birthdateError"
class="error">
</span><br>
<input type="submit" value="Submit">
</form>
<script>
$(function () {
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
yearRange: "-100:+0"
});
$("#ageForm").submit(function (event) {
event.preventDefault();
$("#birthdateError").text("");
let birthdate = $("#datepicker")
.datepicker("getDate");
if (!birthdate) {
$("#birthdateError")
.text("Please enter your birthdate");
return;
}
let today = new Date();
let age = today.getFullYear() -
birthdate.getFullYear();
let monthDiff = today.getMonth() -
birthdate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 &&
today.getDate() < birthdate.getDate())) {
age--;
}
if (age < 18) {
$("#birthdateError")
.text("You must be at least 18 years old");
} else {
alert("Age validation passed! You are "
+ age + " years old.");
}
});
});
</script>
</body>
</html>
Output:
Contact Us