JSFiddle - React, Tailwind, and code Playground
HTML
<form name="as400samplecode">Name:
<input type="text" name="namee" required>
<br>
<br>gender:
<input type="radio" name="sex" value="male">Male
<br>
<input type="radio" name="sex" value="female">Female
<br>
<br>
<input type="text" name="myDate" size=10 maxlength=10 oninput="myAgeValidation()">(in MM/DD/YYYY format)
<br>
<br>
<br>
<br>
<input type="checkbox" name="agree" disabled>I, Agree
<br>
<br>
<br>
<input type="button" value="Submit">
CSS
.acceptable-date {
border : green 1px solid;
}
.valid-date {
border : pink 1px solid;
}
.invalid-date {
border : red 1px solid;
}
JavaScript
function myAgeValidation() {
var lre = /^\s*/;
var datemsg = "";
var inputDate = document.as400samplecode.myDate.value;
inputDate = inputDate.replace(lre, "");
document.as400samplecode.myDate.value = inputDate;
datemsg = isValidDate(inputDate);
if (datemsg != "") {
//alert(datemsg);
document.as400samplecode.myDate.className = "invalid-date";
} else {
//Now find the Age based on the Birth Date
document.as400samplecode.myDate.className = "valid-date";
getAge(new Date(inputDate));
}
}
function getAge(birth) {
var today = new Date();
var nowyear = today.getFullYear();
var nowmonth = today.getMonth();
var nowday = today.getDate();
var birthyear = birth.getFullYear();
var birthmonth = birth.getMonth();
var birthday = birth.getDate();
var age = nowyear - birthyear;
var age_month = nowmonth - birthmonth;
var age_day = nowday - birthday;
if (age_month < 0 || (age_month == 0 && age_day < 0)) {
age = parseInt(age) - 1;
}
//alert(age);
if ((age <= 25) && (age >= 20)) {
document.as400samplecode.agree.disabled = false;
document.as400samplecode.myDate.className = "acceptable-date";
} else {
alert("age limit is 20 - 25");
document.as400samplecode.agree.disabled = false;
}
}
function isValidDate(dateStr) {
var msg = "";
var datePat = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{4})$/;
var matchArray = dateStr.match(datePat); // is the format ok?
if (matchArray == null) {
msg = "Date is not in a valid format.";
return msg;
}
month = matchArray[1]; // parse date into variables
day = matchArray[3];
year = matchArray[4];
if (month < 1 || month > 12) { // check month range
msg = "Month must be between 1 and 12.";
return msg;
}
if (day < 1 || day > 31) {
msg = "Day must be between 1 and 31.";
return msg;
}
...