2012-12-10 16 views
0

我有一個需要不同輸入元素的表格。 當我現在不選擇3個選擇列表中的一個項目時,我收到了3次相同的錯誤消息。 enter image description herejquery.validate.unobtrusive:是否有可能具有唯一錯誤的驗證摘要列表?

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。

+0

你想在這種情況下有什麼?你在問什麼?你的問題不是很清楚。 –

+1

由於三次出現同一類型的錯誤,您會得到相同的錯誤三次。您也可以爲每個字段上的每個錯誤創建自定義的錯誤消息。同時顯示您的HTML,以便回答者可以創建一個準確的jsFiddle演示。 – Sparky

+0

另一個潛在的問題是你正在爲提交按鈕創建一個自定義的'click'處理程序。所有這些代碼都可以輕鬆地附加到'.validate()'插件的內置處理程序中。其實,這可能會更好。 – Sparky

回答

0

我喜歡你的解決方案@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中做了類似的事情,希望它也適用於你。

相關問題