javascriptasp.netrequiredfieldvalidator
How or What is the correct way to handle client side validation errors in webform?
Currently, I'm working on a project which is based on ASP.NET Webforms. I'm applying some forms validations on my client side but I just found strange behavior of RequiredFieldValidator control. See this UI:
All fields marked as required and attached RequiredFieldValidator to all controls, except active checkbox. Now when I press my submit button only supplier dropdown validator shows me error. Like below:
then I select some value from supplier drop down and again click on my submit button:
Now, the strange thing is after selecting the value from the supplier dropdown, all controls validate and shows me the validation error. After selecting some value from the supplier dropdown then my other controls are validating. If I remove my dropdown from my page then all controls validate. The issue occurs when I put dropdown on my page and attached the requiredfieldvalidator to it. why my controls are not validating once when I click on the submit button. Why other controls are dependent on the selection of supplier dropdown value? Is there is any clue what I'm doing wrong?
Here is my ASPX code:
<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>
Solution
I all but Validator rfvSupplierList you have EnableClientScript="False". Therefore the rest only does server validation while the last one does client side also. So when you press the button it only validates ddlSupplierList and blocks the PostBack.
I would suggest removing EnableClientScript="False" from all validators so you both have client and server side validation.
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices