I have a form which is in an updatePanel and I have a span with hidden loading image, which I want to show when user clicks to submit button but I first need to check if page is valid on client side. Also I'm making loading span visible with jQuery. Here is my code:
<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>
$("#form_id"). valid(); Checks whether the selected form is valid or whether all selected elements are valid. validate() needs to be called on the form before checking it using this method.
Using the email type, we can check the validity of the form field with a javascript function called… checkValidity() . This function returns a true|false value. checkValidity() will look at the input type as well as if the required attribute was set and any pattern="" tag .
You can write the JavaScript code in the ASP.Net Page in the following sections. You can write the JavaScript code in the head section, it is the recommended way to write the code, the code must be enclosed in the following syntax: <head id="Head1" runat="server"> <script type="text/javascript">
Page_ClientValidate() will work. It returns true if the page was valid and it works fine. If you are using ASP.NET 2.0, pass the validation group name as a parameter.
Okay I found a solution. Page_ClientValidate() does the trick.
function showLoading() {
if (Page_ClientValidate()) { $("#loader").show(); }
else { alert("Form is invalid!"); }
}
I think it would be better to use the property Page_IsValid instead of the method Page_ClientValidate().
function showLoading() {
if (Page_IsValid) { $("#loader").show(); }
else { alert("Form is invalid!"); }
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With