jquery.validate.unobtrusive：是否有可能具有唯一错误的验证摘要列表？

Question

我有一个需要不同输入元素的表格。 当我现在不选择3个选择列表中的一个项目时，我收到了3次相同的错误消息。

JavaScript的：

$("#btnSubmit").click(function (e) { 
    e.preventDefault(); 
    var form = $(this).closest("form"); 

    if (form.valid()) { 
     var data = form.serialize(); 
     var url = form.attr("action"); 

     $.ajax({ 
      url: url, 
      data: data, 
     }); 
    } 
}); 

形式：

<form method="post" id="simpleForm" action="/MvcApplication4/Home/PostData" novalidate="novalidate"> 
    <table class="grid"> 
     <thead> 
      <tr> 
       <th>Id</th> 
       <th>Name</th> 
       <th>Description</th> 
       <th>DropDown</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="gridrow"> 
       <td> 
        <input type="hidden" value="c590fea7-54cf-49f7-8d41-c6db0095fd90" autocomplete="off" name="list.index"><input type="hidden" value="1" name="list[c590fea7-54cf-49f7-8d41-c6db0095fd90].Id" id="list_c590fea7-54cf-49f7-8d41-c6db0095fd90__Id" data-val-required="The Id field is required." data-val-number="The field Id must be a number." data-val="true"> 
        1 
       </td> 
       <td> 
        <input type="text" value="Name1" name="list[c590fea7-54cf-49f7-8d41-c6db0095fd90].Name" id="list_c590fea7-54cf-49f7-8d41-c6db0095fd90__Name" data-val-required="The Name field is required." data-val="true" class="valid"></td> 
       <td> 
        <input type="text" value="bla1" name="list[c590fea7-54cf-49f7-8d41-c6db0095fd90].Description" id="list_c590fea7-54cf-49f7-8d41-c6db0095fd90__Description" data-val-required="The Description field is required." data-val="true" class="valid"> 
       </td> 
       <td> 
        <select name="list[c590fea7-54cf-49f7-8d41-c6db0095fd90].SelectedItem" id="list_c590fea7-54cf-49f7-8d41-c6db0095fd90__SelectedItem" data-val-required="The SelectedItem field is required." data-val="true" class="input-validation-error"> 
         <option value="">Choose a value</option> 
         <option value="1">Wert1</option> 
         <option value="2">Wert2</option> 
         <option value="3">Wert3</option> 
        </select></td> 
      </tr> 
      <tr class="gridrow_alternate"> 
       <td> 
        <input type="hidden" value="febf58eb-a55e-4e4a-8460-ec5473b44bd6" autocomplete="off" name="list.index"><input type="hidden" value="2" name="list[febf58eb-a55e-4e4a-8460-ec5473b44bd6].Id" id="list_febf58eb-a55e-4e4a-8460-ec5473b44bd6__Id" data-val-required="The Id field is required." data-val-number="The field Id must be a number." data-val="true"> 
        2 
       </td> 
       <td> 
        <input type="text" value="Name2" name="list[febf58eb-a55e-4e4a-8460-ec5473b44bd6].Name" id="list_febf58eb-a55e-4e4a-8460-ec5473b44bd6__Name" data-val-required="The Name field is required." data-val="true" class="valid"></td> 
       <td> 
        <input type="text" value="bla2" name="list[febf58eb-a55e-4e4a-8460-ec5473b44bd6].Description" id="list_febf58eb-a55e-4e4a-8460-ec5473b44bd6__Description" data-val-required="The Description field is required." data-val="true" class="valid"> 
       </td> 
       <td> 
        <select name="list[febf58eb-a55e-4e4a-8460-ec5473b44bd6].SelectedItem" id="list_febf58eb-a55e-4e4a-8460-ec5473b44bd6__SelectedItem" data-val-required="The SelectedItem field is required." data-val="true" class="input-validation-error"> 
         <option value="">Choose a value</option> 
         <option value="1">Wert1</option> 
         <option value="2">Wert2</option> 
         <option value="3">Wert3</option> 
        </select></td> 
      </tr> 
      <tr class="gridrow"> 
       <td> 
        <input type="hidden" value="68eb5fe9-4fc5-4350-b2c7-a997fd6abce6" autocomplete="off" name="list.index"><input type="hidden" value="3" name="list[68eb5fe9-4fc5-4350-b2c7-a997fd6abce6].Id" id="list_68eb5fe9-4fc5-4350-b2c7-a997fd6abce6__Id" data-val-required="The Id field is required." data-val-number="The field Id must be a number." data-val="true"> 
        3 
       </td> 
       <td> 
        <input type="text" value="Name3" name="list[68eb5fe9-4fc5-4350-b2c7-a997fd6abce6].Name" id="list_68eb5fe9-4fc5-4350-b2c7-a997fd6abce6__Name" data-val-required="The Name field is required." data-val="true" class="valid"></td> 
       <td> 
        <input type="text" value="bla3" name="list[68eb5fe9-4fc5-4350-b2c7-a997fd6abce6].Description" id="list_68eb5fe9-4fc5-4350-b2c7-a997fd6abce6__Description" data-val-required="The Description field is required." data-val="true" class="valid"> 
       </td> 
       <td> 
        <select name="list[68eb5fe9-4fc5-4350-b2c7-a997fd6abce6].SelectedItem" id="list_68eb5fe9-4fc5-4350-b2c7-a997fd6abce6__SelectedItem" data-val-required="The SelectedItem field is required." data-val="true" class="input-validation-error"> 
         <option value="">Choose a value</option> 
         <option value="1">Wert1</option> 
         <option value="2">Wert2</option> 
         <option value="3">Wert3</option> 
        </select></td> 
      </tr> 
     </tbody> 
    </table> 
    <input type="submit" id="btnSubmit" value="submit"> 
    <div data-valmsg-summary="true" class="validation-summary-errors"> 
     <ul> 
      <li>The SelectedItem field is required.</li> 
      <li>The SelectedItem field is required.</li> 
      <li>The SelectedItem field is required.</li> 
     </ul> 
    </div> 
</form> 

脚本：

<script type="text/javascript" src="~/Scripts/jquery-1.8.3.js"></script> 
<script type="text/javascript" src="~/Scripts/jquery.validate.js"></script> 
<script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.js"></script> 

我想显示这样的消息：

“要提交表单，您必须为所有下拉列表选择一个值。”

而这条消息应该显示一次而不是3次。文本框也是一样。

的jsfiddle演示：http://jsfiddle.net/6ZQQ2/1/

我的解决方案现在：

function onErrors(event, validator) { // 'this' is the form element 
    var container = $(this).find("[data-valmsg-summary=true]"), 
     list = container.find("ul"); 

    if (list && list.length && validator.errorList.length) { 
     list.empty(); 
     container.addClass("validation-summary-errors").removeClass("validation-summary-valid"); 

     var uniqueList = {}; 
     $.each(validator.errorList, function() { 
      uniqueList[this.message] = this.message; 
     }); 

     for (key in uniqueList) { 
      $("<li />").html(uniqueList[key]).appendTo(list); 
     } 
    } 
} 

所以我只是改变了代码jquery.validate.unobtrusive.js。

Answer 1

我喜欢你的解决方案@Rookian但你并不想改变jquery.validate.unobtrusive.js

你可以听无效，form.validate，把你的实现在那里

form.bind("invalid-form.validate", function (evt, validator) { 
    var container = $(this).find("[data-valmsg-summary=true]"), 
    list = container.find("ul"); 

    if (list && list.length && validator.errorList.length) { 
     list.empty(); 
     container.addClass("validation-summary-errors").removeClass("validation-summary-valid"); 

     var uniqueList = {}; 
     $.each(validator.errorList, function() { 
      uniqueList[this.message] = this.message; 
     }); 

     for (key in uniqueList) { 
      $("<li />").html(uniqueList[key]).appendTo(list); 
     } 
    } 
}); 

我在mvc3中做了类似的事情，希望它也适用于你。