Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 471
HasanG Avatar asked Mar 30 '10 06:03

HasanG


People also ask

How do you check whether a form is valid or not in jQuery?

$("#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.

How do you know if a form is validated?

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 .

Can we use JavaScript in ASP.NET web forms?

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">

How do you check if a website is valid in 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.


2 Answers

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

function showLoading() {
    if (Page_ClientValidate()) { $("#loader").show(); }
        else { alert("Form is invalid!"); }
    }
like image 55
HasanG Avatar answered Sep 28 '22 10:09

HasanG


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!"); }
}
like image 43
thx0125 Avatar answered Sep 28 '22 09:09

thx0125