规则循环 Jquery

Question

我有一个表格，最多可以推荐 5 个人。在表单中，如果推荐人 1 的姓名已填写，下面的 jquery 代码会检查并提示用户填写与推荐人 1 相关的其他表单字段。

我想知道是否可以创建一个循环来执行 5 倍检查，而不是为每组推荐复制和粘贴以下代码？

$("#customer_referral").validate({  

        rules: {

           Referral_1_Salutation: {
                required: function(element) {
                 if($('[name="Referral_1_Name"]').is(':filled')||$('[name="Referral_1_Email"]').is(':filled')||$('[name="Referral_1_Contact_Number_Mobile"]').is(':filled') || $('[name="Referral_1_Contact_Number_Home"]').is(':filled') || $('[name="Referral_1_Contact_Number_Office"]').is(':filled')||($('[name="Referral_1_Best_Time_To_Call"]').prop("selectedIndex")!=0)){
                     return true;                            
                 } else {                    
                     return false;
                 } 
                }           
            },

           Referral_1_Name: {
                required: function(element) {
                 if(($('[name="Referral_1_Salutation"]').prop("selectedIndex")!=0) || $('[name="Referral_1_Email"]').is(':filled') || $('[name="Referral_1_Contact_Number_Mobile"]').is(':filled') || $('[name="Referral_1_Contact_Number_Home"]').is(':filled') || $('[name="Referral_1_Contact_Number_Office"]').is(':filled')||($('[name="Referral_1_Best_Time_To_Call"]').prop("selectedIndex")!=0)){
                     return true;                            
                 } else {                    
                     return false;
                 } 
                }                   
            },  
           Referral_1_Email: {
                required: function(element) {
                 if(($('[name="Referral_1_Salutation"]').prop("selectedIndex")!=0) || $('[name="Referral_1_Name"]').is(':filled') || $('[name="Referral_1_Contact_Number_Mobile"]').is(':filled') || $('[name="Referral_1_Contact_Number_Home"]').is(':filled') || $('[name="Referral_1_Contact_Number_Office"]').is(':filled')||($('[name="Referral_1_Best_Time_To_Call"]').prop("selectedIndex")!=0)){
                     return true;                            
                 } else {                    
                     return false;
                 } 
                }                   
            },  

           Referral_1_Best_Time_To_Call: {
                required: function(element) {
                 if(($('[name="Referral_1_Salutation"]').prop("selectedIndex")!=0) || $('[name="Referral_1_Name"]').is(':filled') || $('[name="Referral_1_Email"]').is(':filled') || $('[name="Referral_1_Contact_Number_Mobile"]').is(':filled') || $('[name="Referral_1_Contact_Number_Home"]').is(':filled') || $('[name="Referral_1_Contact_Number_Office"]').is(':filled')){
                     return true;                            
                 } else {                    
                     return false;
                 } 
                }                   
            },                                                  

        //Check if any one of the contact number is filled
        Referral_1_Contact_Number_Mobile: {
            require_from_group_contact: function(element) {
                if (($('[name="Referral_1_Salutation"]').prop("selectedIndex")!=0) || $('[name="Referral_1_Name"]').is(':filled') || $('[name="Referral_1_Email"]').is(':filled') || ($('[name="Referral_1_Best_Time_To_Call"]').prop("selectedIndex")!=0)) {
                    return [1, ".oneormore"];
                } else {
                    return [0, ".oneormore"];
                }
            }
        },

        Referral_1_Contact_Number_Home: {
            require_from_group_contact: function(element) {
                if (($('[name="Referral_1_Salutation"]').prop("selectedIndex")!=0) || $('[name="Referral_1_Name"]').is(':filled') || $('[name="Referral_1_Email"]').is(':filled') || ($('[name="Referral_1_Best_Time_To_Call"]').prop("selectedIndex")!=0)) {
                    return [1, ".oneormore"];
                } else {
                    return [0, ".oneormore"];
                }
            }
        },
        Referral_1_Contact_Number_Office: {
            require_from_group_contact: function(element) {
                if (($('[name="Referral_1_Salutation"]').prop("selectedIndex")!=0) || $('[name="Referral_1_Name"]').is(':filled') || $('[name="Referral_1_Email"]').is(':filled') || ($('[name="Referral_1_Best_Time_To_Call"]').prop("selectedIndex")!=0)) {
                    return [1, ".oneormore"];
                } else {
                    return [0, ".oneormore"];
                }
            }
        }
        //End of check if any one of the contact number is filled                                                                   

        },
 });

Answer 1

规则也可以通过 the .rules() method 应用，这使您能够使用 jQuery 选择器来更通用地定位事物。 So when the selector targets multiple items, you can use a jQuery .each() to loop through them all.

$('.myfields').each(function() {
    $(this).rules('add', {
        required: true,
        // other rules
    });
});

旁注...

required: function(element) {                  
    if ($('[name="Referral_1_Name"]').is(':filled')||$('[name="Referral_1_Email"]').is(':filled')||$('[name="Referral_1_Contact_Number_Mobile"]').is(':filled') || $('[name="Referral_1_Contact_Number_Home"]').is(':filled') || $('[name="Referral_1_Contact_Number_Office"]').is(':filled')||($('[name="Referral_1_Best_Time_To_Call"]').prop("selectedIndex")!=0)) {
        return true;                            
    } else {                    
        return false;
    } 
}

由于您要返回基于布尔条件的布尔值，因此只需返回条件的结果即可大大简化您的函数...

required: function(element) {                    
    return ($('[name="Referral_1_Name"]').is(':filled')||$('[name="Referral_1_Email"]').is(':filled')||$('[name="Referral_1_Contact_Number_Mobile"]').is(':filled') || $('[name="Referral_1_Contact_Number_Home"]').is(':filled') || $('[name="Referral_1_Contact_Number_Office"]').is(':filled')||($('[name="Referral_1_Best_Time_To_Call"]').prop("selectedIndex")!=0));
}

编辑:

首先，所有内容都需要重新设计以更加通用。我采用了并对其进行了一些修改以获得更通用的内容。我没有有条件地查看每个字段，而是使用 skip_or_fill_minimum 规则来替换 required 规则。

演示：http://jsfiddle.net/yo2vjwus/

现在我们有了一个足够通用的工作模型，我们可以使用 .rules() 方法一次将这些规则应用于多个字段。

$('[name^=Referral_1_]:not("[name^=Referral_1_Contact]")').each(function() {
    $(this).rules('add', {
        skip_or_fill_minimum: [4, '[name^=Referral_1_]:not("[name^=Referral_1_Contact]")']
    });
});

$('[name^="Referral_1_Contact"]').each(function() {
    $(this).rules('add', {
        require_from_group: function(element) {
            if ($('[name="Referral_1_Salutation"]').is(':filled')) {
                return [1, '[name^=Referral_1_Contact]'];
            } else {
                return [0, '[name^=Referral_1_Contact]'];
            }
        }
    });
});

演示版：http://jsfiddle.net/yo2vjwus/1/

至于剩下的四组字段，您将不得不复制此代码或使其更加通用，并将所有内容放入另一个 jQuery .each().

var i = 1;

$('[id^="Referral"]').each(function() {

    $('[name^=Referral_' + i + '_]:not("[name^=Referral_' + i + '_Contact]")').each(function() {
        $(this).rules('add', {
            skip_or_fill_minimum: [4, '[name^=Referral_' + i + '_]:not("[name^=Referral_' + i + '_Contact]")']
        });
    });

    $('[name^="Referral_' + i + '_Contact"]').each(function() {
        $(this).rules('add', {
            require_from_group: function(element) {
                if ($(element).parents('.parentClass').find('[name$="_Salutation"]').is(':filled')) {
                    return [1, '[name^="Referral_' + i + '_Contact"]'];
                } else {
                    return [0, '[name^="Referral_' + i + '_Contact"]'];
                }
            }
        });
    });

    i++;

});

演示：http://jsfiddle.net/yo2vjwus/2/

规则循环 Jquery

Looping of rules Jquery

jquery

loops

jquery-validate