使用 javascript/jquery 检测 Asp.Net 表单是不是有效

Posted

技术标签:

【中文标题】使用 javascript/jquery 检测 Asp.Net 表单是不是有效【英文标题】:Detect if Asp.Net form is valid with javascript/jquery使用 javascript/jquery 检测 Asp.Net 表单是否有效 【发布时间】:2011-02-02 08:17:01 【问题描述】:

我有一个在 updatePanel 中的表单,我有一个带有隐藏加载图像的跨度,我想在用户单击提交按钮时显示它,但我首先需要检查页面在客户端是否有效。此外,我正在使用 jQuery 使加载跨度可见。这是我的代码:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    function showLoading() 
        $('#loader').show();
    
    </script>
</head>

<body>
<asp:ScriptManager ID="smMain" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upForm" runat="server">
<ContentTemplate>
    <asp:MultiView ID="mvContact" runat="server" ActiveViewIndex="0">
        <asp:View ID="vDefault" runat="server">
            <asp:TextBox ID="tEMail" runat="server" CssClass="input" />
            <asp:RequiredFieldValidator ID="rfvEMail" runat="server" ControlToValidate="tEMail" ErrorMessage="* required" Display="Dynamic" />
            <asp:RegularExpressionValidator ID="revEMail" runat="server" ControlToValidate="tEMail" ErrorMessage="* invalid" Display="Dynamic" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
            <asp:ImageButton ID="btnSubmit" runat="server" ImageUrl="~/Assets/Images/btnSubmit.png" ToolTip="Submit Form" style="margin:5px 5px 0 -5px" onclick="btnSubmit_Click" OnClientClick="showLoading();" />
            <span id="loader"><img src="Assets/Images/loader.gif" title="Sending..." /></span>
        </asp:View>
        <asp:View ID="vResult" runat="server">
            <div class="result">
                <span id="lResult" runat="server">Your message is sent</span>
            </div>
        </asp:View>
    </asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
</body></html>

【问题讨论】:

【参考方案1】:

好的,我找到了解决方案。 Page_ClientValidate() 可以解决问题。

function showLoading() 
    if (Page_ClientValidate())  $("#loader").show(); 
        else  alert("Form is invalid!"); 
    

【讨论】:

谢谢伙计!我有同样的问题,你的回答对我有帮助:)【参考方案2】:

我认为最好使用属性 Page_IsValid 而不是方法 Page_ClientValidate()。

function showLoading() 
if (Page_IsValid)  $("#loader").show(); 
    else  alert("Form is invalid!"); 

【讨论】:

Page_IsValid 不会导致 ValidationSummary 出现(如果有的话),但 Page_ClientValidate() 会。 有用的boolean如果你只想知道页面是否有效。【参考方案3】:

如果您不想调用 Page_ClientValidate(),您可以使用 Page_IsValid 但设置一个超时,以便首先进行验证。

OnClientClick="javascript:setTimeout(function()  if (Page_IsValid) document.getElementById('preloader').style.display='block';, 1000);"

预加载器隐藏在中间

&lt;img src="/images/preloader.gif" id="preloader" style="display:none; position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;" /&gt;

【讨论】:

【参考方案4】:

谢谢哈桑,你让我开心:)

我想分享一些我的问题和解决方法。我有一个使用 MasterPage 的 ASP.NET 页。提交表单时,我使用了淡出效果来隐藏按钮。但是,如果表格没有完成,按钮就消失了。我只是在 OP 问题中添加了一个关于 hasan 建议的条件。这是我的最终代码。

//Fade out buttons when clicked but only if page validate
$('.button').click(function () 
    if (Page_ClientValidate())  $('.button').fadeOut('slow'); 
);//End of Fade out buttons

再次感谢哈桑 :)

【讨论】:

以上是关于使用 javascript/jquery 检测 Asp.Net 表单是不是有效的主要内容,如果未能解决你的问题,请参考以下文章

通过 Javascript / jQuery 检测 Android 手机

Javascript/jquery:如何检测在其他窗口或应用链接中加载的页面?

Javascript / jQuery检测输入是不是集中[重复]

使用 Javascript 检测触摸屏设备

JavaScript jquery IE检测

JavaScript JQuery:检测浏览器调整大小