如何或什么是处理 webform 中客户端验证错误的正确方法？答案

【问题标题】：How or What is the correct way to handle client side validation errors in webform?如何或什么是处理 webform 中客户端验证错误的正确方法？
【发布时间】：2019-04-17 18:23:18
【问题描述】：

目前，我正在开发一个基于 ASP.NET Webforms 的项目。我在客户端应用了一些表单验证，但我发现了RequiredFieldValidator 控件的奇怪行为。看到这个用户界面：

标记为必填的所有字段，并将RequiredFieldValidator 附加到所有控件，活动复选框除外。现在，当我按下提交按钮时，只有供应商下拉验证器会显示错误。如下：

然后我从供应商下拉列表中选择一些值并再次单击我的提交按钮：

现在，奇怪的是从供应商下拉列表中选择值后，所有控件都验证并显示验证错误。从供应商下拉列表中选择一些值后，我的其他控件正在验证。如果我从我的页面中删除我的下拉菜单，那么所有控件都会生效。当我在我的页面上放置下拉菜单并将 requiredfieldvalidator 附加到它时，就会出现此问题。为什么当我单击提交按钮时我的控件没有验证一次。为什么其他控件依赖于供应商下拉值的选择？有什么线索我做错了吗？

这是我的 ASPX 代码：

<div class="row">
    <asp:UpdatePanel
        runat="server">
        <ContentTemplate>
            <div class="col-md-4 ah-top-bottom-margin9px col-md-offset-2">
                <div class="input-group ah-equal-textbox-size">
                    <div class="input-group-addon">
                        <table style="width: 100%;">
                            <tr>
                                <td>Catalogue Name
                                </td>
                                <td style="text-align: right;">
                                    <i class="fa fa-exclamation-triangle ah-fa-error" aria-hidden="true"></i>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <asp:TextBox
                        ID="txtCatalogueName"
                        runat="server"
                        ClientIDMode="Static"
                        CssClass="form-control"></asp:TextBox>
                </div>
                <asp:RequiredFieldValidator
                    ID="rfvCatalogueName"
                    runat="server"
                    EnableViewState="False"
                    EnableClientScript="False"
                    ControlToValidate="txtCatalogueName"
                    ForeColor="Red"
                    ErrorMessage="Catalogue name must be enter."
                    Display="Dynamic"
                    ValidationGroup="CatalogueDataSave">
                </asp:RequiredFieldValidator>
            </div>
            <div class="col-md-4 ah-top-bottom-margin9px ah-dropdown-border-left-top-left-bottom-flat">
                <div class="input-group ah-equal-textbox-size">
                    <div class="input-group-addon">
                        <table style="width: 100%;">
                            <tr>
                                <td>Quotation Ref
                                </td>
                                <td style="text-align: right;">
                                    <i class="fa fa-exclamation-triangle ah-fa-error" aria-hidden="true"></i>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <asp:TextBox
                        ID="txtQuotationRef"
                        runat="server"
                        ClientIDMode="Static"
                        CssClass="form-control"></asp:TextBox>
                </div>
                <asp:RequiredFieldValidator
                    ID="rfvQuotationRef"
                    runat="server"
                    EnableViewState="False"
                    EnableClientScript="False"
                    ControlToValidate="txtQuotationRef"
                    ForeColor="Red"
                    ErrorMessage="Quotation Ref must be enter."
                    Display="Dynamic"
                    ValidationGroup="CatalogueDataSave">
                </asp:RequiredFieldValidator>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
<div class="row">
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div class="col-md-4 ah-top-bottom-margin9px col-md-offset-2">
                <div class="input-group ah-equal-textbox-size">
                    <div class="input-group-addon">
                        <table style="width: 100%;">
                            <tr>
                                <td>Catalogue Effective 
                                </td>
                                <td style="text-align: right;">
                                    <i class="fa fa-exclamation-triangle ah-fa-error" aria-hidden="true"></i>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <asp:TextBox
                        ID="txtEffectiveDate"
                        runat="server"
                        CssClass="form-control"></asp:TextBox>
                    <span class="input-group-btn">
                        <asp:LinkButton ID="btnEffectiveCalendar"
                            runat="server"
                            CssClass="btn btn-default"
                            Style="border-top-left-radius: 0; border-bottom-left-radius: 0;"
                            ClientIDMode="AutoID">
                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                        </asp:LinkButton>
                    </span>
                    <ajaxToolkit:CalendarExtender ID="ceEffectiveDate" CssClass="AH_Calendar" runat="server"
                        TargetControlID="txtEffectiveDate" Format="dd/MM/yyyy" PopupButtonID="btnEffectiveCalendar"></ajaxToolkit:CalendarExtender>
                </div>
                <asp:RequiredFieldValidator
                    ID="rfvEffectiveDate"
                    runat="server"
                    EnableViewState="False"
                    EnableClientScript="False"
                    ControlToValidate="txtEffectiveDate"
                    ForeColor="Red"
                    ErrorMessage="EffectiveDate must be enter."
                    Display="Dynamic"
                    ValidationGroup="CatalogueDataSave">
                </asp:RequiredFieldValidator>
            </div>
            <div class="col-md-4 ah-top-bottom-margin9px">
                <div class="input-group ah-equal-textbox-size">
                    <div class="input-group-addon">
                        <table style="width: 100%;">
                            <tr>
                                <td>Catalogue Expiry 
                                </td>
                                <td style="text-align: right;">
                                    <i class="fa fa-exclamation-triangle ah-fa-error" aria-hidden="true"></i>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <asp:TextBox
                        ID="txtExpiryDate"
                        runat="server"
                        CssClass="form-control"></asp:TextBox>
                    <span class="input-group-btn">
                        <asp:LinkButton ID="btnExpiryCalendar"
                            runat="server"
                            CssClass="btn btn-default"
                            Style="border-top-left-radius: 0; border-bottom-left-radius: 0;"
                            ClientIDMode="AutoID">
                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                        </asp:LinkButton>
                    </span>
                    <ajaxToolkit:CalendarExtender ID="ceExpiryDate" CssClass="AH_Calendar" runat="server"
                        TargetControlID="txtExpiryDate" Format="dd/MM/yyyy" PopupButtonID="btnExpiryCalendar"></ajaxToolkit:CalendarExtender>
                </div>
                <asp:RequiredFieldValidator
                    ID="rfvExpiryDate"
                    runat="server"
                    EnableViewState="False"
                    EnableClientScript="False"
                    ControlToValidate="txtExpiryDate"
                    ForeColor="Red"
                    ErrorMessage="Expiry must be enter."
                    Display="Dynamic"
                    ValidationGroup="CatalogueDataSave">
                </asp:RequiredFieldValidator>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
<div class="row">
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div class="col-md-4 ah-top-bottom-margin9px ah-dropdown-border-left-top-left-bottom-flat  col-md-offset-2">
                <div class="input-group ah-equal-textbox-size">
                    <div class="input-group-addon">
                        <table style="width: 100%;">
                            <tr>
                                <td>Select Supplier
                                </td>
                                <td style="text-align: right;">
                                    <i class="fa fa-exclamation-triangle ah-fa-error" aria-hidden="true"></i>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <asp:DropDownList
                        ID="ddlSupplierList"
                        runat="server"
                        CssClass="form-control chosen-select"
                        Style="width: 280px;">
                    </asp:DropDownList>
                </div>
                <asp:RequiredFieldValidator
                    ID="rfvSupplierList"
                    runat="server"
                    EnableViewState="False"
                    ControlToValidate="ddlSupplierList"
                    ForeColor="Red"
                    ErrorMessage="Supplier must be selected."
                    ValidationGroup="CatalogueDataSave"
                    Display="Dynamic">
                </asp:RequiredFieldValidator>
            </div>
            <div class="col-md-4 ah-top-bottom-margin9px ah-dropdown-border-left-top-left-bottom-flat">
                <div class="input-group ah-equal-textbox-size">
                    <asp:UpdatePanel runat="server">
                        <ContentTemplate>
                            <div class="ah-active">
                                <span>Active</span>
                                <span>
                                    <asp:CheckBox
                                        ID="chkActive"
                                        runat="server"
                                        Checked="false" />
                                </span>
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
<div class="row">
    <div class="col-md-12">
        <div runat="server" class="panel panel-default">
            <div class="panel-body">
                <div class="text-center">
                    <asp:UpdatePanel
                        runat="server">
                        <ContentTemplate>
                            <asp:Button
                                ID="btnSaveItem"
                                runat="server"
                                Text="Save"
                                ValidationGroup="CatalogueDataSave"
                                CssClass="btn btn-primary"
                                OnClick="btnSaveItem_Click" />
                            <asp:Button
                                ID="btnReset"
                                runat="server"
                                Text="Reset"
                                CssClass="btn btn-default"
                                OnClick="btnReset_Click" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

如果移除更新面板，会发生什么？
从哪个控件删除更新面板？如果我从下拉列表中删除，那么它会回发整个页面，如果我从其他控件中删除更新面板，它们不会显示错误。
如果可以，为什么不使用 ajax 调用而不是更新面板？

标签： javascript asp.net requiredfieldvalidator

【解决方案1】：

除了验证器rfvSupplierList，我只有EnableClientScript="False"。因此，其余的仅进行服务器验证，而最后一个也进行客户端验证。因此，当您按下按钮时，它只会验证 ddlSupplierList 并阻止 PostBack。

我建议从所有验证器中删除 EnableClientScript="False"，以便您同时进行客户端和服务器端验证。

【讨论】：