Question

我有一个表，其中包含所需的不同输入元素。当我现在不选择3个选择列表中的项目时，我得到了相同的错误消息3次。 enter image description here

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

您可以收听invalid-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中做了类似的事情，希望它也适合你。

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

1 个答案: