Check for a Minimum Age with jQuery Validation

While working on a client project, we needed a way to ensure a user was at least 13 years old before submitting a form. We were already using the jQuery Validation plugin for the form validation method but it didn’t have a method for checking for a minimum age.

The jQuery Validation plugin makes client-side form validation easy. It comes with a bunch of useful validation methods like required, email, url, date, etc. jQuery Validation does not have a standard method to require a minimum age for a field but it is easy to create a custom validation method.

<input type="date" name="dob" placeholder="mm/dd/yyyy"/>

We need to extend the plugin to create a custom validation method for checking a minimum age using the data of birth:

$.validator.addMethod("minAge", function(value, element, min) {
	var today = new Date();
	var birthDate = new Date(value);
	var age = today.getFullYear() - birthDate.getFullYear();

	if (age > min+1) {
		return true;
	}

	var m = today.getMonth() - birthDate.getMonth();

	if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
		age--;
	}

	return age >= min;
}, "You are not old enough!");

We can use this custom method to validate a minimum age:

$("form").validate({
	rules: {
		dob: {
			required: true,
			minAge: 13
		}
	},
	messages: {
		dob: {
			required: "Please enter you date of birth.",
			minAge: "You must be at least 13 years old!"
		} 
	}
});

Leave a Reply

Your email address will not be published. Required fields are marked *