Question

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.

Answer 1

You probably just need to set the class as “required email” instead of the current validate options configuration. Here is the modified demo code that works for me:

<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="required email" id="em2">

The javascript and css remain the same.

<script type="text/javascript">
$(document).ready(function() {
    $("#form").validate({meta: "validate"});
});
</script>
<style type="text/css" media="screen">
    label.error {
    color: red;
    font-weight: bold;
}
</style>

Validation rules are run for each class set for the form field and a standard error for each rule will be displayed. In this example, first the “required” rule is run and displays the error saying “This field is required” and once the field is not empty, “email” validation rule is run till the field value matches email format tested by the rule.

If you want more control on the error messages, you can pass more configuration in “validate” function call like this:

$("#form").validate({
       rules: {
         fn: "required",
         ln: "required",
         em: {
           required: true,
           email: true
         }
       },
       messages: {
         fn: "Please specify your first name",
         ln: "Please specify your last name",
         em: {
           required: "We need your email address to contact you",
           email: "Your email address must be in the format of [e-mail]"
         }
       }
    });