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.

why down vote? you can suggest for fiddle without doing that also. — KAsh, Mar 27 '14 at 14:07

score 0 · Answer 1 · answered Mar 27 '14 at 13:45

0

To add rules to hidden inputs you have to ignore hidden property:

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

answered Mar 27 '14 at 13:45

radia

1,456
1
13
18

The fields are not hidden.they are normal text fileds but not shown to user. if user selects it from drop down it's shown. – KAsh Mar 27 '14 at 13:47

score 0 · Accepted Answer · answered Mar 27 '14 at 15:35

0

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/

answered Mar 27 '14 at 15:35

Ryley

21,046
2
67
81

as per your suggestion I did this with my code but apparently its validating all the fields included in the validate call, even if they are not visible. – KAsh Mar 28 '14 at 05:32
Thanks @Ryley worked for me. The pre loaded other js were creating problems – KAsh Mar 28 '14 at 07:23

adding rules dynamically to jquery validate gives error

2 Answers2