2010-03-30 9 views
3

J'ai un formulaire qui est dans un updatePanel et j'ai un span avec l'image de chargement cachée, que je veux montrer lorsque l'utilisateur clique sur le bouton soumettre, mais je dois d'abord vérifier si la page est valide du côté client. Aussi, je suis en train de rendre le span de chargement visible avec jQuery. Voici mon code:Détecter si le formulaire Asp.Net est valide avec 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> 

Répondre

11

Okay J'ai trouvé une solution. Page_ClientValidate() fait l'affaire.

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

Merci sœur! J'ai eu le même problème et votre réponse m'a aidé :) –

0

Merci Hasan, vous avez fait ma journée :)

Je veux partager peu de mon problème et la résolution. J'ai une page ASP.NEt utilisant une page MasterPage. Lors de la soumission d'un formulaire, j'ai utilisé l'effet fadeOut pour masquer les boutons. Cependant, si le formulaire n'est pas rempli, les boutons ont disparu. J'ajoute simplement une condition sur la suggestion hasan au problème OP. Voici mon code final.

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

Merci encore Hasan :)

+0

De rien. –

2

Je pense qu'il serait préférable d'utiliser la propriété Page_IsValid au lieu de la méthode Page_ClientValidate().

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

Si vous ne voulez pas appeler Page_ClientValidate() vous pouvez utiliser Page_IsValid mais définir un délai afin que la validation se produit d'abord.

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

le préchargement est caché au milieu

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

Questions connexes