adding jquery validation after form created

Question

I'm using a jquery validation plugin

First I add the validation to the form:

$('#EmployeeForm').validate({
        rules: {
            "Employee.FirstName": "required",
            "Employee.PatronymicName": "required",
            "Employee.LastName": "required",
            "Employee.BirthDay": { required: true, date: true }
        },

        messages: {
            "Employee.FirstName": { required: "*" },
            "Employee.PatronymicName": { required: "*" },
            "Employee.LastName": { required: "*" },
            "Employee.BirthDay": { required: "*", date: "00.00.00 format" }
        }
    });

It works fine until here. I then later a need to add validation rules to other form elements:

$('#Address_A.Phone1, #Address_A.Phone2, #Address_B.Phone1, #Address_B.Phone2')
            .rules("add", {
                digits: true
            });

Here I get an error: 'form' is null or not an object

I check, the form and all the elements in it are created before I add validation to it.
I cant figure out what's wrong.

Answer 1

I didn't ever use that plugin but from what I see in documentation you should use normal jQuery selectors instead of #Address_A.Phone1, #Address_A.Phone2, #Address_B.Phone1, #Address_B.Phone2 (well those also are normal selectors but they have no sense in normal usage).

So try to use something like this: #EmployeeForm #first-name, #EmployeeForm #last-name

Answer 2

Is it possible that the latter is added a result that is returned by AJAX -- a result that might have replaced the form on the page? Or perhaps in a separate "on load" section that might be running before the validation plugin has been applied? I'd suggest using the unminified validation script and stepping through with the debugger (Firefox/Firebug would be my preference). Put breakpoints in both the validation set up and the addition of the rules to see which is being hit first. If the form is replaced via AJAX, you'll have to reapply the validation plugin to it before you add rules as the old form is no longer available.

Answer 3

Just a guess is Address_A.Phone1 the id of your element?

If yes I guess your problems comes from the fact that you use . in your element id's. But jQuery won't understand e.g. #Address_A.Phone1 as give me element with id Address_A.Phone1 but instead will interpret this selector as: Give me element with id Address_A which has the class Phone1.

But actually this doesn't explain the error. Can you append on which line this error occurs. Is it in your code or inside the plugin code? If inside the plugin on which line