jquery验证动态添加输入

时间:2013-10-12 22:53:40

标签: jquery dynamic jquery-validate

我目前正在使用bassistance jquery validation或jqueryvalidation插件(他们将其重命名),我让它验证了这样的表单:

if($.fn.validate) {
        $("#frmNewOrder").validate({
            rules: {
                txtAmount: {
                    required: true,
                    digits: true
                },
                ddlAccount: {
                    required: true
                },
                ddlBank: {
                    required: true
                }
            }
        });
    }

现在取决于我需要的数量或不需要额外的字段下拉列表,并根据该下拉列表另一个文本输入。所以它就像:

 if($('#txtAmount').val() >= 10000){
     //add ddlReason required
 }

 if($('#ddlReason').val() == 'o'){
     //add txtReason required
 }

我已经尝试像其他字段一样添加css类'required',但如果它们不在规则中,我会接受它然后它不起作用?我试过添加这样的规则:

 $( "#ddlReason" ).rules( "add", {
        required: true});

这也不起作用。有什么建议吗?

编辑:这是我正在使用的jquery验证的link。如果我在外面使用规则就会出现这个错误:

Uncaught TypeError: Cannot read property 'settings' of undefined 
第124行

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

并使用我在其他地方看到的建议我已经完成了这个导致错误的原因:

var defaultrules = {
    txtAmount: {
        required: true,
        digits: true
    }
}

if($.fn.validate) {
    $("#frmNewOrder").validate();
    addRules(defaultrules);
}

编辑2:这是html标记,希望它有所帮助。

<form id="frmNewOrder" name="frmNewOrder" action="" method="post">
<label>Amount</label>
<input type="text" name="txtAmount" id="txtAmount" class="required" />
<button id="calculate" type="button">Calculate</button>
<div id="dvreason" style="display:none;">
    <select id="ddlReason" name="ddlReason">
         <option></option>
         <option value="i">Option 1</option>
         <option value="o">Other</option>
    </select>
    <div id="dvother" style="display:none">
       <label>Other reason</label>
       <input type="text" name="txtOther" id="txtOther" />
    </div>
</div>
<input type="submit" name="send" id="send" value="Send" />
</form>

3 个答案:

答案 0 :(得分:10)

我也收到了相同的错误消息,并意识到我应该在单个输入字段上调用validate()之前先调用表单上的rules()。此行为是documented

$('#form').validate({
  rules: {
    email: {
      email: true
    }
  }
});

$('#email').rules('add', {
  required: true
});

这可能不是OP问题的答案,但我发布此信息是为了帮助搜索jquery validation Cannot read property settings of undefined并点击此页面的任何人。

感谢@ nsawaya提供的提示!

答案 1 :(得分:5)

遇到类似的问题,

实际上您会注意到,第124行未定义验证器,即没有与表单关联的验证器实例

如果你检查验证方法,你会看到如果验证器未定义,它将创建一个新的

var validator = $.data(this[0], 'validator');
        if ( validator ) {
            return validator;
        }

        // Add novalidate tag if HTML5.
        this.attr('novalidate', 'novalidate');

            //HERE it is creating a new one using the constructor   
        validator = new $.validator( options, this[0] );
        $.data(this[0], 'validator', validator);

显然rules方法假定验证器已经存在于表单对象中,因此根据我的理解,并且由于validate返回验证器实例,您可以调用validate然后追加您的返回的验证器settings.rules对象的额外规则,并再次重新运行,这是不太实际的。

另一种解决方案是在调用validate之前简单地将添加的规则附加到初始规则对象

所以在我的情况下,我希望输入字段被验证为数字但是我不希望谷歌浏览器将其设为数字​​字段(只是在Chrome中尝试看看我的意思, 如果用户手动输入,则会出现绕过类型号验证的问题,在我的情况下,用户很可能会手动输入数字。

代码示例:

var customRule = {number: true};

//suppose populateValidateRules() fills your initial rules, which is my case at least
var validationRules =  populateValidateRules();

validationRules["rules"].fieldToBeDynamicallyModifiedForValidation= customRule;

$(formId).validate(validationRules);

希望这有帮助

答案 2 :(得分:0)

使用id获取动态add元素时出现问题所以如果你使用属性选择器就可以了,例如添加属性data="ddlReason"并使它像这样:

$( "input[data='ddlReason']" ).rules( "add", {
        required: true
});