javascript - 激活 asp 验证器时禁用阻止 ui

Question

我有以下登录表单，并且在服务器端验证正在进行时使用阻止 UI 来阻止登录表单，并且由于更新面板，此阻止 ui 在更新面板后再次取消阻止登录表单刷新:

登录表单:

<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"/>

这个 block ui 正在做什么，它永久地阻止了我的 div，但由于输入错误，验证器仍然被激活，并且用户无法再次重试日志记录。

以下是 block ui 的代码

阻止用户界面:

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

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

    });

});

现在我想要的是，每当我的 asp 验证器被激活时，这个 block ui 就应该被禁用。请帮帮我。

Answer 1

我使用简单的 javascript isValid 属性找到了解决方案

我正在做的是检查所有验证器的有效性，如果所有验证器都正确并通过，那么只有我调用 block ui 来阻止登录表单，如下所示:`

$(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'


                }           

            });

        }

    });

});

现在，仅当所有验证器都通过时，登录表单才会被阻止，并保持阻塞状态，直到服务器端验证完成并更新面板更新为止。