2010-03-30 30 views
3

我有一個窗體是在updatePanel中,並且我有一個帶有隱藏加載圖像的窗口,當用戶點擊提交按鈕時我想顯示,但我首先需要檢查頁面在客戶端是否有效。此外,我正在使用jQuery顯示加載跨度。這裏是我的代碼:檢測Asp.Net窗體是否與javascript/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> 

回答

11

好吧,我找到了一個解決方案。 Page_ClientValidate()可以做到這一點。

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

謝謝配合!我有同樣的問題,你的答案幫助我:) – 2013-08-16 11:09:16

0

謝謝哈桑,你讓我很快樂:)

,我想分享我的問題和解決的一些位。我有一個使用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 

再次感謝哈桑:)

+0

不客氣。 – 2013-09-20 12:15:53

2

我認爲這將是更好的使用屬性Page_IsValid,而不是方法Page_ClientValidate()。

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

如果使驗證第一次出現不想叫Page_ClientValidate(),您可以使用Page_IsValid但設置超時。

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

預加載隱藏在中間

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