2012-07-20 105 views
0

我有一个规则,说每个阶段的总数量选择必须等于预订乘客的人数。每个阶段在DIV定义像在这个例子中: -jQuery验证插件 - 防止重复错误消息

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()}然后我就得到一个错误说 “预计:”

    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; 
    } 
    
+0

我已经想出了如何动态创建规则,我现在只需要了解如何只显示错误消息一次。 – 2012-07-20 14:44:40

+0

想象一下,见下文。 – 2012-07-20 15:10:27

回答

0

想通了自己。我需要将验证器上的控件分组。一旦完成,我可以在单独的容器中显示每个阶段的错误。这些组和规则是动态创建的,如下所示...

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);