ASP.NET OnClientClick="return validate()" 不起作用

Posted

技术标签:

【中文标题】ASP.NET OnClientClick="return validate()" 不起作用【英文标题】:ASP.NET OnClientClick="return validate()" not working 【发布时间】:2016-05-18 21:06:16 【问题描述】:

在下面的aspx页面中,无论我如何调用OnClientClick="return validate()",页面都会回传。以下是我尝试过的以及每次尝试的结果:

OnClientClick="return true" ----- 成功回发

OnClientClick="return false" ------ 无回发

OnClientClick="return validate()" ----- 即使输入错误也成功

OnClientClick="return validate()" ------ 成功,输入良好

OnClientClick="if (!validate()) return false;" ----- 无论输入如何都没有回发

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    function validate() 
        $('input[type=text]').each(function () 
            if ($(this).val() === '' || $(this).val() === 'Required Field' || $(this).val() === 'Username' || $(this).val() === 'Password') 
                return false;
             else 
                return true;
            
        );
    
    $(document).ready(function () 
        $('input[type=text]').focusin(function () 
            $(this).removeClass('Invalid');
            $(this).val('');
        ),
         $('input[type=text]').focusout(function () 

             if ($(this).val() === '') 
                 $(this).removeClass('Valid');
                 $(this).addClass('Invalid');
                 $(this).val('Required Field');
              else 
                 $(this).addClass('Valid');
             
         );
    );
</script>
<title></title>
<style type="text/css">
    .Invalid 
        border: 2px solid red;
        background-color: lightpink;
        color: red;
    

    .Valid 
        border: 2px solid green;
        background-color: lightgreen;
        color: green;
    
</style>
</head>
<body>
    <form id="frmLogin" runat="server">
        <asp:TextBox ID="txtUser" runat="server" Text="Username"></asp:TextBox>
        <asp:TextBox ID="txtPassword" runat="server" Text="Password"></asp:TextBox>
        <asp:Button ID="btnSubmit" runat="server" Text="Login" OnClientClick="if (!validate()) return false;" OnClick="btnSubmit_Click" />
  </form>
</body>
</html>

【问题讨论】:

【参考方案1】:

您可以尝试将按钮更改为:

<asp:Button ID="btnSubmit" runat="server" Text="Login" OnClick="return validate();" />

如果这不起作用,请使用表单 onsubmit 处理程序,这可能是更好的方法:

<form id="frmLogin" runat="server" onsubmit="return validate();">

【讨论】:

我正在寻找这个按钮的流程是它验证客户端而不是如果一切都很好,则转到服务器端点击事件。 @Kurtis Durtis,这将在客户端验证。 这似乎更像是一种“变通”而不是解决方案。我想知道为什么它只有在我输入返回 true 时才会起作用。有什么不对劲,但我不知道为什么。 @Kurtis Durtis 。 OnClientClick 是按钮的属性,仅用于指定引发 onclick 事件时执行的 javascript。它本身不是一个事件,因此在其中返回 true 或 false 将无济于事。 See the documentation here.

以上是关于ASP.NET OnClientClick="return validate()" 不起作用的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET OnClientClick="return validate()" 不起作用

在 Asp.net VB 中从后面的代码调用 OnClientClick

如何使用带有 asp.net 的 jQuery 进行 onclientclick 回发

在asp.net中,按钮onclick和onclientclick不能用于javascript中的alert和confirm方法。

asp.net动态生成按钮Button控件

OnClientClick 自定义消息框之前 Onclick 事件处理程序不起作用