Why ScriptManager causes postback on RequiredField

Question

Before adding the ScriptManager when I was clicking on the login button it was showing the required field warning without page postback but after that it has started to do postback first and then validate fields.

It's required to add a ScriptManager when there is an UpdatePanel on the page.

How can I fix this so it doesn't postback on RequiredFieldValidator?

Login Page

<form id="signinform" runat="server" defaultfocus="username" defaultbutton="LogInBtn">

    <asp:scriptmanager id="FormScriptManager" runat="server"></asp:scriptmanager>

    <div class="form-signup">

        <div class="form-group form-group-info">
            <div class="append-icon m-b-30">
                <asp:textbox id="username" runat="server" cssclass="form-control c-white form-control-success" placeholder="Username" />
                <i class="mdi-action-perm-identity c-light"></i>
                <asp:requiredfieldvalidator runat="server" id="UserNameValidator" controltovalidate="username" display="Dynamic" validationgroup="LoginVAL" setfocusonerror="true" cssclass=" f-11 c-red m-b-0" errormessage="The username is required." />
            </div>
        </div>

        <div class="form-group form-group-info">
            <div class="append-icon m-b-30">
                <asp:textbox id="Password" textmode="Password" runat="server" cssclass="form-control c-white form-control-success" placeholder="Password" />
                <i class=" mdi-action-lock-outline c-light"></i>
                <asp:requiredfieldvalidator runat="server" id="PasswordValidator" controltovalidate="Password" display="Dynamic" setfocusonerror="true" validationgroup="LoginVAL" cssclass="f-11 c-red m-b-0" errormessage="The password is required." />
            </div>
        </div>

        <div class="togglebutton togglebutton-info">
            <label class="c-light normal f-11 m-b-15">
                <input type="checkbox" runat="server" name="RememberMe" id="RememberMe" class="md-checkbox">
                Remember me?
            </label>
        </div>
    </div>

    <asp:placeholder runat="server" id="ErrorMessage" visible="false" viewstatemode="Disabled">
        <p id="ErrorMessageContainer" runat="server" class="badge badge-danger m-b-5 f-11">
            <asp:Literal runat="server" ID="FailureText" ViewStateMode="Disabled" />
        </p>
    </asp:placeholder>

    <div class="progress-demo">
        <asp:linkbutton id="LogInBtn" runat="server" onclick="LogIn" text="Login" cssclass="btn btn-material-indigo btn-block btn-embossed ladda-button" validationgroup="LoginVAL" data-style="zoom-in"></asp:linkbutton>
    </div>

    <p>
        <%--   Enable this once you have account confirmation enabled for password reset functionality--%>
        <asp:hyperlink runat="server" id="ForgotPasswordHyperLink" viewstatemode="Disabled">Forgot your password?</asp:hyperlink>
    </p>


    <div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div id="LoginModalHeader" runat="server" class="modal-header bg-aero">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icons-office-52"></i></button>
                    <h4 class="modal-title c-white">
                        <asp:label id="LoginModalTitle" runat="server" />
                    </h4>
                </div>

                <asp:updatepanel id="LoginModalUpdatePanel" runat="server">
                    <ContentTemplate>

                        <div class="modal-body m-t-10">
                            <p class=" c-gray w-300 f-13"><asp:Label ID="LoginModalDetails" runat="server" /></p>
                        </div>
                        <div class="modal-footer">
                            <asp:LinkButton runat="server" ID="ResendConfirm" OnClick="SendEmailConfirmationToken" Text="Resend Confirmation" Visible="false" CssClass="btn btn-material-blue-grey btn-embossed" />
                            <button id="LoginModalCancel" runat="server" type="button" class="btn btn-default btn-embossed" data-dismiss="modal">Cancel</button>
                        </div>

                    </ContentTemplate>
                    </asp:updatepanel>

            </div>
        </div>
    </div>

</form>

I appreciate your efforts in reaching a solution for my problem.

Answer 1

I came across the same issue a while back and was able to resolve it via Page.Validate();.

Basically, before I added ScriptManager everything was working well. When I would click the update button, the field validators would run and prevent a post back until requirements were met. After adding ScriptManager tag, the page would post back rendering my validators pretty much useless.

What I did was add on my update (submit) button click event:

page.validate();
if (Page.IsValid)
{
    // Your update or submit code here.
}

This seems to work fine!

Answer 2

Write like this..

 <asp:updatepanel id="LoginModalUpdatePanel" runat="server">
 <ContentTemplate>
//paste all codes inside here 
</ContentTemplate>
</asp:updatepanel>