I've got a basic form setup for user input (first name, last name, email). I've got jQuery and the validation plugin imported properly. My configuration for the validation is this:
$(document).ready(function() {
$("#form").validate({meta: "validate"});
});
According to the documentation for the plugin that can be found here and here, this should mean I can add specifics to each input I want to validate. Thusly, I have this:
<input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn0">
<input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln1">
<input type="text" name="em" value="" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address.', email:'Please enter a valid email address.'}}}" id="em2">
Each of these has it's own label that I've omitted.
My CSS is setup like this:
label.error {
color: red;
font-weight: bold;
}
When on the form after clicking submit with all three fields blank, First Name and Last name show the red error messages as expected (Please enter your first name. and Please enter your last name. respectively. However, no error messages come up for the Email. If I put an invalid-formatted email address, I still receive no message. I've googled for a while and have read over the documentation, but I can't seem to pinpoint where this might be failing.
Thanks
Note: IDs and Names have been editied for simplicity from my source code.