Question

我有一个动态表，每行包含country和numberOfState字段。目前，我可以在单击“AddNewRecord”按钮后单独添加新记录并单独验证country和numberOfState字段（例如，必需），该按钮位于生成动态表唯一字段名称的代码下方，即name =“country_0”，“numberOfState_0”对于第1行，=“country_1”，第二行的“numberOfState_1”等等。

想要检查是否可以一起验证动态country和numberOfState字段（即Country是US，NumberOfState必须是50），使用动态规则代码，如下面的addRowRule函数。提前谢谢。

     $(document).ready(function(e){
            var rowindex = 0;

            $("#AddNewRecord").click(function(){
                var row = 
                    "<tr><td>input name=country_"+rowindex+" type=text class='countryRule'/></td>
                     <tr><td>input name=numberOfState_"+rowindex+" type=text class='stateRule'/></td></tr>";
                $("#table").append(row);
                rowindex++;
                addRowRule(rowindex);
            });

           jQuery.validate.addClassRules({
                countryRule:{required:true},
                stateRule:{required:true}
            });

            $('form').validate();


    function addRowRule(i) {     
    var country = '#country_' + i,
    var numberOfState = '#numberOfState_' + i;

    $(country).rules('add', {
        required: true,
        numberOfState:{              
          required: {
             depend: function(element){
                  if ($(country).val() == 'US' &&     
                       $(numberOfState).val() !=50){
                           return false;
                  }
                  return true;
             }
             messages: {
                numberOfState: "Number of state not match with country",
             }
          },
          messages: {
                required: "Required input",
             }    
    });
});

更新了与所有人共享的代码：

$( document ).ready(function() {
     $("#myForm").validate(); //sets up the validator

     var rowindex = 0;
     $("#AddNewRecord").click(function(){
         var row = "<tr><td>input name=country_"+rowindex+" type=text /></td>" +
                "<tr><td>input name=numberOfState_"+rowindex+" type=text /></td></tr>";
         $("#table").append(row);
         addRowRule(rowindex);
         rowindex++;     
     });

     function addRowRule(row_index) {     
        var country = '#country_' + row_index;
        var numberOfState = '#numberOfState_' + row_index;

        $(country).rules('add', {
            required: true,
            messages: {
                required: "Pls input country."
            }
        });

        $(numberOfState).rules('add', {
            required: true,
            checkCountryAndState: [country, numberOfState],
            messages: {
                required: "Pls input number of state."
            }
        });
     }

     jQuery.validator.addMethod("checkCountryAndState", function(value, element, params){
         var varCountry = params[0];
         var varNumberOfState = params[1];
         if ($(varCountry).val() === 'America' && $(varNumberOfState).val() !== 50){
            return false;
         }
         return true;
     }, jQuery.format("Country is not match with Number of State."));

});

Answer 1

您可以使用rules属性指定验证规则。这应该做你在问题中指定的例子：

$(".selector").validate({
    rules: {
        field2: {
            required: true,
            field1: {
                depends: function(element) {
                    if ($('#field1').val() === 'A' && $('#field2').val() === 'Z') {
                        return false;
                    }
                    return true;
                }
            }
        }
    }
});

在此之后，如果验证失败并且具有messages属性，则需要分配消息。

Answer 2

您的部分问题是在.rules()方法中放置了无效对象。由于.rules()方法已经附加到选择器（表示SINGLE字段），因此您无法为其中的其他字段声明规则...

function addRowRule(i) {    

    var country = '#country_' + i,
    var numberOfState = '#numberOfState_' + i;

    $(country).rules('add', {
        required: true,
        numberOfState: {  // <- you can NOT put this here       
            required: { ...

.rules()内允许的唯一对象是各种规则/方法和/或key: value对象的messages列表。

您必须将其他字段附加到.rules() ....

的不同实例

function addRowRule(i) {  

    var country = '#country_' + i,
    var numberOfState = '#numberOfState_' + i;

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

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

使用动态规则验证多个表字段

2 个答案: