adding rules dynamically to jquery validate gives error

Question

I am validating my dynamic form using jQuery validate. I am having a drop down on my html with values 1,2,3,4. If 1 is selected from drop down i am showing one div with some field, if 2 is selected i am showing div1 + another div with some new filed and so on for 3 and 4.

all the fields comes in one single form

<form name="client_basic_details" id="client_basic_details" method="post" action="...">
        <select  name="applicant_num" id="applicant_num">
                <option value="">-- Select --</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
        </select>
        <div id="applicant_1">
        <input type="text" name="app_1_fname" id="app_1_fname">
        <input type="text" name="app_1_mname" id="app_1_mname">
        <input type="text" name="app_1_lname" id="app_1_lname">
        </div>
        <div id="applicant_2">
        <input type="text" name="app_2_fname" id="app_2_fname">
        <input type="text" name="app_2_mname" id="app_2_mname">
        <input type="text" name="app_2_lname" id="app_2_lname">
        </div>
        <div id="applicant_3">
        ....
        </div>
        <div id="applicant_4">
        ...
        </div>
    </form>

Onchange of select box I am setting visibility to true of div like

$("#applicant_num").change(function(){
hide("applicant_1");
hide("applicant_2");
hide("applicant_3");
hide("applicant_4");
for(var i=1; i<=$("#applicant_num").val(); i++)
    {
        var div_id = "applicant_"+i;
        show(div_id);
            //if loop given below lies here
    }
});

along with this i am adding validation rules to the fields

if(i==1)
    {
        $('#applicant1_salutation').rules('add','required');
        $('#applicant1_initial').rules('add','required');
        $('#applicant1_suffix').rules('add','required');
        $('#applicant1_fname').rules('add','required');
        $('#applicant1_lname').rules('add','required');
        $('#applicant1_dob').rules('add','required');
        $('#applicant1_marital_status').rules('add','required');
        $('#applicant1_work').rules('add','required');
        $('#applicant1_no_dependant').rules('add','required');
        $('#applicant1_sin').rules('add','required');
        $('#applicant1_fax').rules('add','required');
        $('#applicant1_cont_method').rules('add','required');
    }
    if(i==2)
    {

    }
    if(i==3)
    {

    }
    if(i==4)
    {

    }

for the first 5 options rules are being attached to validate methode but after that I am getting this error in console

TypeError: element is undefined

var settings = $.data(element.form, 'validator').settings;

Instead of adding rules by each statement I used this option but it results same with the above error message.

Please suggest.

I am adding validate method in document.ready function

EDIT:

Fiddle here: http://jsfiddle.net/E4rua/4/

I want to add rules for further forms like 2,3,4

PS

The Biggest problem I was facing here is:

In the comparison it was evident that by default the jquery validator ignores all the hidden elements in 1.9 version, whereas 1.8 does validate every control in the page, no matter they are visible or invisible.

Re.

Answer 1

要将规则添加到隐藏输入中，您必须忽略hidden属性：

$.validator.setDefaults({ ignore: []});

Answer 2

Simply add the rules to your validate call for the other fields. The default behaviour is that when they are not visible, they will not be validated, but when they are visible, they will be validated. I think this is what you want.

So if you add this to your rules object:

        applicant2_salutation: {
                    required: true
            }

That will result in the "salutation" being required, but only when applicant2 is visible.

Working example: http://jsfiddle.net/ryleyb/E4rua/5/