jquery验证动态添加输入

Question

我目前正在使用bassistance jquery验证或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验证的链接.如果我在外面使用规则则会出现此错误:

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>

Answer 1

我也得到了同样的错误信息,并意识到我应该validate()在调用rules()单个输入字段之前先调用表单.这种行为被记录在案.

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

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

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

感谢@ nsawaya给出的提示!

Answer 2

面对类似的问题,

实际上您会注意到,第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);

希望这可以帮助