jQuery驗證插件-防止重復出現錯誤消息

Question

我有一條規則說，對於每個階段，選擇的總數量必須等於預訂的乘客人數。 像下面的示例一樣，每個階段都在DIV中定義：

的HTML

<div id="Stage_1">
    <select data-stage="1" id="Quantity1" name="Items[1].Quantity">...</select>
    <select data-stage="1" id="Quantity2" name="Items[2].Quantity">...</select>
    <select data-stage="1" id="Quantity3" name="Items[3].Quantity">...</select>
</div>
<div id="Stage_2">
    <select data-stage="2" id="Quantity4" name="Items[4].Quantity">...</select>
    <select data-stage="2" id="Quantity5" name="Items[5].Quantity">...</select>
</div>

因此，例如，如果我在上述示例中預訂了4位乘客，則數量1-3的總和必須等於4，數量4-5的總和也必須等於4。

然后，我使用jQuery驗證插件進行驗證...

腳本

function ValidateStages(value, element, options) {
    var stage = options[0];

    var valid = true;
    var arrVS = new Array(0);

    jQuery('div[id*="Stage_' + stage + '"] select[id*="Quantity"]').each(function () {
        var e = jQuery(this);
        if (arrVS[e.attr('data-stage')] == undefined) {
            arrVS[e.attr('data-stage')] = 0;
        }
        arrVS[e.attr('data-stage')] += parseInt(e.val());
    });

    for (key in arrVS) {
        if(arrVS[key] != MaxPassengers) {
            valid = false;
        }
    }

    return valid;
}

jQuery(document).ready(function () {
    jQuery.validator.addMethod("validate_stages", ValidateStages, "Stage {0} error ");

    jQuery('form:first').validate({
        errorContainer: "#ValidationSummary",
        errorLabelContainer: "#ValidationSummary",
        rules: {
            "Items[1].Quantity": { validate_stages: [1] } ,
            "Items[2].Quantity": { validate_stages: [1] } ,
            "Items[3].Quantity": { validate_stages: [1] } ,
            "Items[4].Quantity": { validate_stages: [2] } ,
            "Items[5].Quantity": { validate_stages: [2] } 
        },
    });
});

問題

我有以下問題：

1. 該錯誤消息顯示在頁面上的每個下拉菜單中。 因此，例如，如果說“ 階段1錯誤階段1錯誤階段1錯誤階段2錯誤階段2錯誤 ”。 如果階段1和階段2無效，則應僅顯示“ 階段1錯誤階段2錯誤 ”

2. 如您所見，規則是硬編碼的。 我確實嘗試創建一個可以動態創建規則的函數（見下文），但我不知道如何應用它。 如果我嘗試執行規則：{GetRules（）}，那么我會收到一條錯誤消息：“ expected：”

    var GetRules = function () { var rules = ''; jQuery('div[id*="Stage_"]').each(function (i) { jQuery('#' + jQuery(this).attr('id') + ' select[id*="Quantity_"]').each(function (j) { var name = jQuery(this).attr('name'); rules = rules + '"' + name + '": { validate_stages: [' + (i + 1) + '] }, '; }); }); if (rules.length > 2) { rules = rules.slice(0, -2); } return rules; } 

Answer 1

我自己想通了。 我需要對驗證器上的控件進行分組。 完成此操作后，我可以在單獨的容器中顯示每個階段的錯誤。 組和規則是動態創建的，如下所示...

var validation =
{
    errorContainer: "#ValidationSummary",
    errorLabelContainer: "#ValidationSummary",
    groups: {}, rules: {}, messages: {}
};

jQuery('div[id*="Stage_"]').each(function (i) {
    jQuery('#' + jQuery(this).attr('id') + ' select[id*="Quantity_"]').each(function (j) {
        var name = jQuery(this).attr('name');
        var Rule = name;
        validation.rules[Rule] = { validate_stages: [i + 1] };
    });
});

jQuery('div[id*="Stage_"]').each(function (i) {
    var group_ctrls = ''
    jQuery('#' + jQuery(this).attr('id') + ' select[id*="Quantity_"]').each(function (j) {
        var name = jQuery(this).attr('name');
        group_ctrls = group_ctrls + name + ' ';
    });
    validation.groups['group_' + i] = group_ctrls;
});

jQuery('form:first').validate(validation);