jquery - jQuery Validation Plugin - エラーメッセージの繰り返しを防ぐ

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. ご覧のとおり、ルールはハードコーディングされています。その場でルールを作成する関数 (以下を参照) を作成しようとしましたが、それを適用する方法がわかりません。rules: { 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;
   }