单击按钮但未显示错误消息

Question

一个很奇怪的问题，我有一个aspnet web表单的文本框。我使用 jquery 来验证文本框。如果未通过验证，则文本框会显示红色警告。 到目前为止，如果我单击页面中的任意位置并假设我打算输入无效文本进行测试，那么一切都很好。

我的代码：（已更新）

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=TextUserName.ClientID%>").blur(function () {
            ValidateUserNameAfterBlur();
        });
    });

    function ValidateUserName() {
        $.ajax({ type: "POST",
            url: "../UserNameWebService.asmx/ValidateUserName",
            data: "{'strUsername': '" + $("#<%=TextUserName.ClientID%>").val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                return data;
            }
        });
    }

    function ValidateUserNameBeforeSubmitting() {
        isValid = ValidateUserName();
        return isValid;
    }

    function ValidateUserNameAfterBlur() {
        isValid = ValidateUserName();
        $('#TextUserNameError').toggle(!isValid);
    }



</script>

其他一些标记代码：

 <td class="style4">
            <asp:TextBox ID="TextUserName" runat="server"></asp:TextBox>
        </td>
        <td>
            <span id="TextUserNameError" style="display:none; color:Red; font-weight:bold;">This is not a valid username</span>
        </td>

但是网页上有一个 asp.net 按钮。点击按钮后，错误确实出现了，但很快就消失了。

按钮代码：

 <p>
    <asp:Button ID="btnSave" runat="server" Text="SaveChanges" OnClick="btnSave_Click"
        CssClass="saveButton" ValidationGroup="answer" OnClientClick="return ValidateUserNameBeforeSubmitting();" />
</p>

我相信它是由回发引起的，但没有任何线索。 感谢专家的帮助。

添加图片

并且

Answer 1

我相信你是对的，这是因为当你点击按钮时（我假设它是一个提交按钮？）页面执行回发。当 javascript 验证失败时，防止页面回发的一种简单方法是让 javascript 函数返回“false”。这将阻止页面执行回发。

也就是说，我不确定您为什么要将用户名验证连接到 document.click。似乎您的页面将在用户每次点击页面时执行验证，无论值是否已更改。

对用户输入的文本执行客户端验证的公认方法是当相关控件失去焦点时。在 JQuery 中，这将是 blur()。这样，您的验证仅在用户完成更改控件中的值时运行。

这将是您的按钮代码（注意OnClientClick）：

<asp:Button ID="btnSubmit" runat="server" OnClientClick="return ValidateUserNameBeforeSubmitting();" />

您的 javascript 应如下所示：

    $(document).ready(function () {
        $("#<%=TextUserName.ClientID%>").blur(function () {
            ValidateUserNameAfterBlur();
        });
    });

    function ValidateUserName() {
        $.ajax({ type: "POST",
            url: "../UserNameWebService.asmx/ValidateUserName",
            data: "{'strUsername': '" + $("#<%=TextUserName.ClientID%>").val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                return data;
            }
        });
    }

    function ValidateUserNameBeforeSubmitting() {
        isValid = ValidateUserName();
        return isValid;
    }

    function ValidateUserNameAfterBlur() {
        isValid = ValidateUserName();
        //DISPLAY ERROR MESSAGE
    }

[更新]

工作示例 - 值“123”将返回 true 以进行验证。其他所有内容都将返回 false。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#TextUserName").blur(function () {
            ValidateUserNameAfterBlur();
        });
    });

    function ValidateUserName() {
        return $("#TextUserName").val() == "123";

//      $.ajax({ type: "POST",
//          url: "../UserNameWebService.asmx/ValidateUserName",
//          data: "{'strUsername': '" + $("#<%=TextUserName.ClientID%>").val() + "'}",
//          contentType: "application/json; charset=utf-8",
//          dataType: "json",
//          async: false,
//          success: function (data) {
//              return data;
//          }
//      });
    }

    function ValidateUserNameBeforeSubmitting() {
        isValid = ValidateUserName();
        $('#TextUserNameError').toggle(!isValid);
         return isValid;
    }

    function ValidateUserNameAfterBlur() {
        isValid = ValidateUserName();
        $('#TextUserNameError').toggle(!isValid);
    }



</script></head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextUserName" runat="server" />
        <div ID="TextUserNameError" style="display: none;" >Ooops!</div>
        <br />
        <asp:Button UseSubmitBehavior=true ID="btnSubmit" runat="server" OnClientClick="return ValidateUserNameBeforeSubmitting();" />
    </div>
    </form>
</body>
</html>