在 ASP.Net ValidationSummary 中隐藏冗余错误消息答案

【问题标题】：Hide redundant error message in ASP.Net ValidationSummary在 ASP.Net ValidationSummary 中隐藏冗余错误消息
【发布时间】：2012-11-26 13:21:00
【问题描述】：

我有一个 asp.net 页面，它接受两个输入值——名称和地址。这两个都是必填字段。我使用了必填字段验证器和验证摘要。

当用户没有输入这两个值时，如果错误消息被触发两次，则错误消息是多余的。即使有两个错误，我也只需要显示一个错误消息。

我们如何使用 jQuery 来处理它？
我们如何使用 ASP.Net 标记来处理它？

注意：我最初认为验证控件将在页面加载自身时发出 HTML，以便我可以使用“查看源代码”并在 HTML 元素上执行 jQuery。但事实并非如此。它只呈现如下

 <div id="vsumAll" class="validationsummary" style="display:none;"> </div>

结果

ASP.Net 标记

<body>
<form id="form1" runat="server">
<div>
    <table cellpadding="5" cellspacing="5" width="100%">
        <tr>
            <td>
                <table border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td>
                            Name
                        </td>
                        <td>
                            <asp:TextBox runat="server" ID="txtName"></asp:TextBox>
                            <asp:RequiredFieldValidator runat="server" ID="reqWorkorderFormat" ControlToValidate="txtName"
                                Text="*" ErrorMessage="Fill all values!"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Address
                        </td>
                        <td>
                            <asp:TextBox runat="server" ID="txtAddresss"></asp:TextBox>
                            <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="txtAddresss"
                                Text="*" ErrorMessage="Fill all values!"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Button runat="server" ID="btnSave" Text="Save" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:ValidationSummary runat="server" ID="vsumAll" DisplayMode="BulletList" CssClass="validationsummary" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
</form>
</body>

【问题讨论】：

为什么不对不同的验证器使用不同的错误消息？这也更加用户友好。
@TimSchmelter 我在这里别无选择。这是批准的要求。除非有证据表明无法处理，否则我无法更改它。
然后至少将“vlaues”更改为“values”;-)

标签： jquery asp.net validation-controls

【解决方案1】：

这有点骇人听闻，但它会起作用：

添加以下Javascript函数：

function submitValidate() {
    var isValid = Page_ClientValidate('');

    if (!isValid) {
        setTimeout("$('#vsumAll ul li:not(:first)').remove()", 5);
    }

    return isValid;
}

在提交按钮中添加：

<asp:Button runat="server" ID="btnSave" Text="Save" OnClientClick="submitValidate();"/>

最后，确保您的 ValidationSummary 上有 ClientIDMode="Static"

说明：
它使用 JQuery 删除 ValidationSummary 中除第一个 li 之外的所有内容 - 这实际上是一个 UnorderedList（例如 ul）。
我把它放在 5 毫秒 setTimeout 中，因为我们希望它仅在 ValidationSummary 完成将所有项目添加到 ul 后运行。
代码仅在 Page_ClientValidate 失败时运行 - 这是执行客户端验证的函数。

【讨论】：

Page_ClientValidate 不是synchronous 电话吗？我们为什么要约定时间？
正如您所注意到的，时间延迟不在 ClientValidate 上。它在 Jquery 上。正如我在回答中所说，延迟是针对在某些浏览器（例如 FF）中发生在不同线程上的摘要。