jQuery Validation Not Working Properly

Question

I'm trying to validate four different fields. The last two have the validation behaving correctly, but the first two don't work (they should only be required). If I press submit without entering anything, only the last two fields show errors.

Here's the jQuery in question:

        $("#advertisePost").validate({
            rules: {
                advRetailerName: {
                    required: true
                },
                advName: {
                    required: true
                },
                advPhone: {
                    required: true,
                    phoneUS: true
                },
                advEmail: {
                    required: true,
                    email: true
                }           
            },
            messages:{
                advRetailerName: {
                    required: "This is required."
                },
                advName: {
                    required: "This is required."
                },
                advPhone: {
                    required: "This is required.",
                    phoneUS: "This is an invalid phone number."
                },
                advEmail: {
                    required: "This is required",
                    email: "This is an invalid email"
                }
            }
        });

Here's the actual form itself:

 <form action="php/advertisePost.php" method="POST" id="advertisePost">
<table>
<tr>
    <td>Retailer Name</td><td><input type="text" id="advRetailerName" name="advRetailerName" class="required"/><br/><label for="advRetailerName" class="error" generated="true"></label></td>
</tr>
<tr>
    <td>Your Name</td><td><input type="text" id="advName" name="advName" class="required"/><br/><label for="advName" class="error" generated="true"></label></td>
</tr>
<tr>
    <td>Phone Number</td><td><input type="text" id="advPhone" name="advPhone" class="required"/><br/><label for="advPhone" class="error" generated="true"></label></td>
</tr>
<tr>
    <td>Email Address</td><td><input type="text" id="advEmail" name="advEmail" class="required"/><br/><label for="advEmail" class="error" generated="true"></label></td>
</tr>
</table>
    <input type="button" value="Submit" id="advSubmit"/>
</form>

I even tried adding the required class to each field. I know it's not a message-handling problem either. The first two fields simply don't follow validation rules. Any help?

Answer 1

try it like this

$.validator.addClassRules({
      advPhone: {
          required: true,
          phoneUS: true
      },
      advEmail: {
          required: true,
          email: true
      }
});

$("#advertisePost").validate();

then add class required to the first two

alternatively you could could just do the validate line and add classes email and required to the last two

Answer 2

If you just want to validate that the first two fields are required then you can set a class = "required" in their respective input fields and set advRetailerName : "required" in your jquery. Here's the documentation for validate: http://docs.jquery.com/Plugins/Validation

Answer 3

Seems like a bug in validation plugin. Possibly it's not understanding complex-style rule assignment when you're only requesting for "required" parameter? Have you tried the simple way:

rules: {
    advRetailerName: "required",
    (...)
}