将规则动态添加到 jquery validate 会产生错误

Question

我正在使用 jQuery validate 验证我的动态表单。 我在我的 html 上有一个下拉列表，值为 1、2、3、4。 如果从下拉列表中选择 1，我将显示一个带有某个字段的 div，如果选择 2，我将显示 div1 + 另一个带有一些新字段的 div，依此类推 3 和 4。

所有字段都以一种形式出现

<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 我将 div 的可见性设置为 true

$("#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
    }
});

与此同时，我正在向字段添加验证规则

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)
    {
        
    }

前 5 个选项规则被附加到验证方法，但之后我在控制台中收到此错误

TypeError: 元素未定义

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

我使用this option而不是通过每个语句添加规则 但结果与上述错误消息相同。

请提出建议。

我正在 document.ready 函数中添加验证方法

编辑：

在这里提琴：http://jsfiddle.net/E4rua/4/

我想为 2、3、4 等其他形式添加规则

PS

我在这里遇到的最大问题是：

在比较中很明显，默认情况下，jquery 验证器忽略 1.9 版本中的所有隐藏元素，而 1.8 确实验证页面中的每个控件，无论它们是可见的还是不可见的。

Re.

Answer 1

只需将规则添加到其他字段的验证调用中。默认行为是当它们不可见时，它们不会被验证，但是当它们可见时，它们将被验证。我想这就是你想要的。

因此，如果您将其添加到您的规则对象中：

        applicant2_salutation: {
                    required: true
            }

这将导致需要“称呼”，但仅当申请人2 可见时。

工作示例：http://jsfiddle.net/ryleyb/E4rua/5/

Answer 2

要向隐藏输入添加规则，您必须忽略隐藏属性：

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