How to validate a login modal in asp.net webforms using jquery?

Question

I have a simple asp.net webpage which uses a modal bootstrap for login. After the user click on the Login button, it should authenticate the user and download a zip file by calling a server side method "ExportToZip". The problem that I am facing is that I can't find a way to first validate the username and password and then to call the server side method "ExportToZip". All the time it validates the form fields but the server method is called no matter what. And if there is an error in the server method, modal window closes.

I guess I would need to find a way so that the jquery click event triggers first. Then the server side method is triggered to.

Modal window:

<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="ModalTitle" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;</button>
                        <h4 class="modal-title" id="ModalTitle">Login with your Syncade credentials</h4>
                    </div>
                    <div class="modal-body">
                        <span id="userNamSpan"></span>
                        <asp:TextBox ID="txtUsername" runat="server" CssClass="form-control" placeholder="Enter Username" AutoCompleteType="Disabled" />
                        <br />
                        <span id="passwordSpan"></span>
                        <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="form-control" placeholder="Enter Password" AutoCompleteType="Disabled" />


                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="btnLogin" Text="Login" runat="server" OnClientClick="ExportToZip;" Class="btn btn-primary" />
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

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

jquery part:

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnShowLogin").click(function () {
            $('#LoginModal').modal('show');
        });

        //validate form inputs
        $("#btnLogin").click(function (e) {
            if ($("#txtUsername").val() == "")
                $("#userNamSpan").text("Enter Username:");
            else
                $("#userNamSpan").text("");

            if ($("#txtPassword").val() == "")
                $("#passwordSpan").text("Enter Password:");
            else
                $("#passwordSpan").text("");

        });
    });
</script>

Answer 1

Try something like this:

<asp:Button ID="btnLogin" Text="Login" runat="server" OnClientClick="return ExportToZip();" Class="btn btn-primary" />

function ExportToZip() {
var isValid = true:
if ($("#txtUsername").val() == "")  {
                $("#userNamSpan").text("Enter Username:");
                isValid = false:
     }
        if ($("#txtPassword").val() == "") {
                $("#passwordSpan").text("Enter Password:");
        isValid = false:
   }

   return isValid:
}