我有一个表，其中包含所需的不同输入元素。当我现在不选择 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 中的代码。