Javascript 单击按钮，但不显示错误消息_Javascript_Jquery_Asp.net_Postback

Javascript 单击按钮，但不显示错误消息

javascript jquery asp.net

Javascript 单击按钮，但不显示错误消息,javascript,jquery,asp.net,postback,Javascript,Jquery,Asp.net,Postback,一个非常奇怪的问题，我有一个文本框在aspnet网页形式。我使用jquery验证文本框。如果未通过验证，则文本框将显示红色警告。到目前为止，如果我单击页面中的任何位置，并假设我打算键入一个无效文本进行测试，那么这一切都很好我的代码：（已更新） $（文档）.ready（函数（）{ $（“#”）模糊（函数（）{ ValidateUserNameAfterBlur（）； }); }); 函数ValidateUserName（）{ $.ajax（{type:“POST”， url:“../User

一个非常奇怪的问题，我有一个文本框在aspnet网页形式。我使用jquery验证文本框。如果未通过验证，则文本框将显示红色警告。到目前为止，如果我单击页面中的任何位置，并假设我打算键入一个无效文本进行测试，那么这一切都很好

我的代码：（已更新）


$（文档）.ready（函数（）{
$（“#”）模糊（函数（）{
ValidateUserNameAfterBlur（）；
});
});
函数ValidateUserName（）{
$.ajax（{type:“POST”，
url:“../UserNameWebService.asmx/ValidateUserName”，
数据：“{'strUsername'：'”+$（“#”）.val（）+“}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
async:false，
成功：功能（数据）{
返回数据；
}
});
}
函数ValidateUserNameBeforeSubmitting（）{
isValid=ValidateUserName（）；
返回有效；
}
函数ValidateUserNameAfterBlur（）{
isValid=ValidateUserName（）；
$（'#TextUserNameError'）。切换（！isValid）；
}

其他一些标记代码：

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

我相信是回邮造成的，但没有线索。感谢专家的帮助

添加图像

及

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

也就是说，我不知道为什么要将用户名验证连接到document.click。似乎每次用户单击页面时，页面都会执行验证，而不管值是否已更改

对用户输入的文本执行客户端验证的公认方法是当相关控件失去焦点时。在JQuery中，这将是

blur（）

。这样，只有当用户完成更改控件中的值时，才会运行验证

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

OnClientClick

）：

您的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
    }

$（文档）.ready（函数（）{
$（“#”）模糊（函数（）{
ValidateUserNameAfterBlur（）；
});
});
函数ValidateUserName（）{
$.ajax（{type:“POST”，
url:“../UserNameWebService.asmx/ValidateUserName”，
数据：“{'strUsername'：'”+$（“#”）.val（）+“}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
async:false，
成功：功能（数据）{
返回数据；
}
});
}
函数ValidateUserNameBeforeSubmitting（）{
isValid=ValidateUserName（）；
返回有效；
}
函数ValidateUserNameAfterBlur（）{
isValid=ValidateUserName（）；
//显示错误消息
}

[更新]

工作示例-值“123”将返回true进行验证。其他一切都将返回错误

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


$（文档）.ready（函数（）{
$（“#TextUserName”）.blur（函数（）{
ValidateUserNameAfterBlur（）；
});
});
函数ValidateUserName（）{
返回$（“#TextUserName”）.val（）=“123”；
//$.ajax（{type:“POST”，
//url:“../UserNameWebService.asmx/ValidateUserName”，
//数据：“{'strUsername'：'”+$（“#”）.val（）+“}”，
//contentType:“应用程序/json；字符集=utf-8”，
//数据类型：“json”，
//async:false，
//成功：功能（数据）{
//返回数据；
//          }
//      });
}
函数ValidateUserNameBeforeSubmitting（）{
isValid=ValidateUserName（）；
$（'#TextUserNameError'）。切换（！isValid）；
返回有效；
}
函数ValidateUserNameAfterBlur（）{
isValid=ValidateUserName（）；
$（'#TextUserNameError'）。切换（！isValid）；
}
哎呀！

这是一个提交按钮。如何更改jquery代码？添加OnError？使用submit按钮上的OnClientClick属性。当用户单击该按钮时，OnClientClick将在回发之前运行。您应该在那里运行用户名验证代码。如果验证通过，让javascript函数返回“return true；”。如果验证失败，让javascript函数返回“return false；”。通过将“false”返回到OnClientClick，这将阻止页面发回。但我想使用此提交按钮将数据保存到数据库。我们可以在客户端进行吗？该按钮仍将用于使用回发保存数据。如果用户名无效，我假设你想阻止回发，对吗？请看我添加的图片和数据的说明。

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

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