HTML and CSS Reference
In-Depth Information
Figure 5-23.
<datalist>
populated using jQuery
In order to validate that an employee was at least 18 years old at the time of hiring, you need to find
out the difference between
BirthDate
and
HireDate
. If this difference is greater than 18 years, the employee
record can be added or updated. The
HomePhone
text box is of type
tel
(
TextMode
of
Phone
), and the
telephone number entered should be a valid US telephone number. Both of these validations are
performed when a record is added or updated. Listing 5-24 shows how this is done.
Listing 5-24.
Validating the Age Requirement and Telephone Number Format
$("input[name$='btnUpdate']").click(function (e) {
var birthDate = ToDate($("input[name$='txtBirthDate']").val());
birthDate.setFullYear(birthDate.getFullYear() + 18);
var hireDate = ToDate($("input[name$='txtHireDate']").val());
var txtBirthDate = $("input[name$='txtBirthDate']").get(0);
if ((hireDate.getTime() - birthDate.getTime()) < 0) {
txtBirthDate.setCustomValidity("Invalid Birth Date or Hire Date!");
}
else {
txtBirthDate.setCustomValidity("");
}
var pattern = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
var value = $("input[name$='txtPhone']").val();
var txtPhone = $("input[name$='txtPhone']").get(0);
if (!pattern.test(value)) {
txtPhone.setCustomValidity("Invalid Telephone Number!");
}
else {
txtPhone.setCustomValidity("");
}
});
function ToDate(input) {
var parts = input.match(/(\d+)/g);
return new Date(parts[0], parts[1] - 1, parts[2]);
}
