Disable block ui when asp validator is activated

Question

I have following login form and I am using Block UI to block the login form while server side validation is going on, and because of update panel this block ui again unblock login form after update panel is refreshed:

Login Form:

<h1>User Login</h1>
<asp:Label ID="lblErrorCredentials" runat="server" ForeColor="Red"></asp:Label>
<label class="grey" for="log">Email ID:</label>


<asp:TextBox ID="txtCustEmailID" runat="server" CssClass="field"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfvCustEmailID" runat="server" Font-Bold="False"
Font-Size="Small" ForeColor="Red" ErrorMessage="Please Enter Valid EmailId."
ControlToValidate="txtCustEmailID" SetFocusOnError="True"Text="*">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revCustEmailID" runat="server"
ControlToValidate="txtCustEmailID" ErrorMessage="Invalid Email ID" Font-Bold="False"
Font-Size="Small" ForeColor="Red"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</asp:RegularExpressionValidator>


<label class="grey">Password:</label>

<asp:TextBox ID="txtCustPwd" runat="server" CssClass="field"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfvCustPwd" Font-Bold="False"Font-Size="Small" ForeColor="Red" runat="server" ErrorMessage="Please Enter Your Password."
ControlToValidate="txtCustPwd" SetFocusOnError="True" Text="*">
</asp:RequiredFieldValidator>

<asp:Button ID="btnCustLogin" runat="server" Text="Login" OnClick="btnCustLogin_Click"/>

What this block ui is doing its blocking my div permanently still the validators are activated because of wrong input and user is unable to retry logging again.

following is the code for block ui

Block UI:

$(document).ready(function () {
    $('#btnCustLogin').click(function () {
        $('div#LoginForm').block({

            message: '<h4>Processing</h4>',
            css: { border: '3px solid #35a7c1' }
        });

    });

});

Now what I want that whenever my asp validators get activated this block ui should be disabled. Please help me out.

Answer 1

I found the solution using simple javascript isValid property

What I am doing is checking for the validity of all the validators, if all validators are correct and passed then only I am calling block ui to block the login form as follows:`

$(document).ready(function () {
    $('#btnCustLogin').click(function () {
        if (document.getElementById("rfvCustEmailID").isvalid && document.getElementById("revCustEmailID").isvalid && document.getElementById("rfvCustPwd").isvalid) {
        $('div#LoginForm').block({

            message: '<h3><img src="Images/Loading_Smaller.gif"/> Processing...</h3>',
            css: {
                    border: '3px solid #35a7c1',
                    width: '200px'


                }           

            });

        }

    });

});

Now the login form is blocking only when the all validators are passed and remain blocked until the server side validation completed and update panel updates.