如何或什么是处理 webform 中客户端验证错误的正确方法？
How or What is the correct way to handle client side validation errors in webform?
目前，我正在从事一个基于 ASP.NET Webforms 的项目。我在我的客户端应用了一些表单验证，但我刚刚发现 RequiredFieldValidator 控件的奇怪行为。看到这个 UI:
所有字段都标记为必填，并将 RequiredFieldValidator 附加到所有控件，活动复选框除外。现在，当我按下提交按钮时，只有供应商下拉验证器显示错误。如下所示：
然后我 select 下拉供应商的一些值并再次单击我的提交按钮：
现在，奇怪的是在 select 从供应商下拉列表中输入值后，所有控件都会验证并向我显示验证错误。 select 从供应商下拉列表中输入一些值后，我的其他控件正在验证。如果我从页面中删除下拉菜单，则所有控件都会生效。当我在页面上放置下拉菜单并将 requiredfieldvalidator 附加到它时，就会出现问题。为什么当我点击提交按钮时我的控件没有验证一次。为什么其他控件依赖于 selection of supplier 下拉值？有什么线索是我做错了什么吗？
这是我的 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>
除了Validator rfvSupplierList你还有EnableClientScript="False"。因此，其余的只做服务器验证，而最后一个也做客户端。因此，当您按下按钮时，它只会验证 ddlSupplierList 并阻止 PostBack。
我建议从所有验证器中删除 EnableClientScript="False"，这样你们都可以进行客户端和服务器端验证。
目前，我正在从事一个基于 ASP.NET Webforms 的项目。我在我的客户端应用了一些表单验证，但我刚刚发现 RequiredFieldValidator 控件的奇怪行为。看到这个 UI:
所有字段都标记为必填，并将 RequiredFieldValidator 附加到所有控件，活动复选框除外。现在，当我按下提交按钮时，只有供应商下拉验证器显示错误。如下所示：
然后我 select 下拉供应商的一些值并再次单击我的提交按钮：
现在，奇怪的是在 select 从供应商下拉列表中输入值后，所有控件都会验证并向我显示验证错误。 select 从供应商下拉列表中输入一些值后，我的其他控件正在验证。如果我从页面中删除下拉菜单，则所有控件都会生效。当我在页面上放置下拉菜单并将 requiredfieldvalidator 附加到它时，就会出现问题。为什么当我点击提交按钮时我的控件没有验证一次。为什么其他控件依赖于 selection of supplier 下拉值？有什么线索是我做错了什么吗？
这是我的 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>
除了Validator rfvSupplierList你还有EnableClientScript="False"。因此，其余的只做服务器验证，而最后一个也做客户端。因此，当您按下按钮时，它只会验证 ddlSupplierList 并阻止 PostBack。
我建议从所有验证器中删除 EnableClientScript="False"，这样你们都可以进行客户端和服务器端验证。