Detect if Asp.Net form is valid with javascript/jquery

Question

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>

HasanG · Accepted Answer · 2010-03-30 06:24:58Z

16

Okay I found a solution. Page_ClientValidate() does the trick.

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

answered Mar 30, 2010 at 6:24

HasanG

13.2k31 gold badges103 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thx0125 · Accepted Answer · 2014-07-10 22:27:36Z

6

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!"); }
}

answered Jul 10, 2014 at 22:27

thx0125

1271 silver badge11 bronze badges

2 Comments

Benjamin Ray Over a year ago

Page_IsValid doesn't cause the ValidationSummary to appear (if there is one), but Page_ClientValidate() does.

kosmosan Over a year ago

Useful boolean if you only want to know if the page is valid or not.

taylor michels · Accepted Answer · 2014-09-24 15:58:00Z

1

If you don't want to call Page_ClientValidate() you can use Page_IsValid but set a timeout so that the validation occurs first.

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

the preloader is hidden in the middle

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

answered Sep 24, 2014 at 15:58

taylor michels

5386 silver badges14 bronze badges

Comments

Mario · Accepted Answer · 2013-09-20 11:58:53Z

0

Thank you Hasan, you made my day :)

I want to share some bit of my problem and resolution. I have an ASP.NEt page using a MasterPage. When submiting a form I used the fadeOut effect to hide the buttons. However if the form is not completed the buttons was gone. I simply add a condition on hasan suggestion to the OP problem. Here is my final code.

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

Thanks again Hasan :)

answered Sep 20, 2013 at 11:58

Mario

3354 silver badges11 bronze badges

Collectives™ on Stack Overflow

Detect if Asp.Net form is valid with javascript/jquery

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related