ASP.NET Update Panel – Required Field Validator fires for AutoPostBack DropDownList even though CausesValidation = false

I’m having an issue where a required field validator flashes on the screen when the dropdown list it’s attached to does a partial postback on change.

Essentially the page is a form where the user selects from the 1st dropdownlist and that populates a second dropdownlist. They then select from the 2nd dropdownlist. Then when the user has selected both they hit the submit button and that validates both dropdowns.

Both dropdowns are in the validationgroup that the submit button uses. I’ve added CausesValidation=”false” to the dropdownlist but the validator still flashes. Sample code below…

<form id="form1" runat="server">

    <asp:ScriptManager ID="MyAppScriptManager" runat="server"
        EnablePartialRendering="true"
        EnableCdn="true" />

        <div class="chat">

                        <asp:UpdatePanel ID="NewBookingUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
                            <ContentTemplate>

                                    <div id="FreelancerDiv" class="collapse show">
                                        <div class="card-body">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <asp:DropDownList ID="FreelancerDropDownList" runat="server" AutoPostBack="true"
                                                        CausesValidation="false"
                                                        class="custom-select form-control form-control-lg">
                                                        <asp:ListItem Value=" " Text="Choose the freelancer for your booking." />
                                                        <asp:ListItem Value="Good" Text="Good selection." />
                                                    </asp:DropDownList>
                                                </div>
                                                <asp:RequiredFieldValidator ID="FreelancerRequired" runat="server" Display="Dynamic"
                                                    ControlToValidate="FreelancerDropDownList"
                                                    ValidationGroup="RequestBookingValidationGroup"
                                                    ErrorMessage="&nbsp;Required&nbsp;"
                                                    CssClass="alert-danger" />
                                            </div>
                                        </div>
                                    </div>

                                 
                                    <div id="ServiceDiv" class="collapse show" runat="server">
                                        <div class="card-body">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <asp:DropDownList ID="ServiceDropDownList" runat="server" AutoPostBack="true"
                                                        CausesValidation="false"
                                                        class="custom-select form-control form-control-lg">
                                                        <asp:ListItem Value=" " Text="Choose the service for your booking." />
                                                        <asp:ListItem Value="Good" Text="Good selection." />
                                                    </asp:DropDownList>
                                                </div>
                                                <asp:RequiredFieldValidator ID="ServiceRequired" runat="server" Display="Dynamic"
                                                    ControlToValidate="ServiceDropDownList"
                                                    ValidationGroup="RequestBookingValidationGroup"
                                                    ErrorMessage="&nbsp;Required&nbsp;"
                                                    CssClass="alert-danger" />
                                            </div>
                                        </div>
                                    </div>
                               
                                <button id="RequestBooking" runat="server" class="btn btn-lg btn-primary btn-block" type="button" onserverclick="RequestBooking_Click" validationgroup="RequestBookingValidationGroup">
                                    Request Booking
                                </button>
                            </ContentTemplate>
                        </asp:UpdatePanel>

        </div>
</form>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can enable or disable (enabled=true or enabled=false) the required field validators on the postback (and/or in the markup or page load event). Believe it’s defaulted to enabled which is why its firing.

Method 2

@JobesK thanks for Enabled=false tip that helped 🙂

I disabled the validators in markup and then enabled them in javascript in the submit button…

                ValidatorEnable(document.getElementById('<%=FreelancerRequired.ClientID%>'), true);
                                        ValidatorEnable(document.getElementById('<%=ServiceRequired.ClientID%>'), true);
                                        Page_ClientValidate("RequestBookingValidationGroup");

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0