jQuery Validation in ASP.NET

Posted by Abu Hamzah on Stack Overflow See other posts from Stack Overflow or by Abu Hamzah
Published on 2010-05-17T17:25:07Z Indexed on 2010/05/17 17:40 UTC
Read the original article Hit count: 251

Filed under:

jQuery

|

validation

i have a strange situation may its a easy fix or something i may be missing but here is the question.

i have a asp.net form with master page and my validation works great without any problem but the problems starts when i try to hook my click event to the server side,

here is what i meant: i have a form with few fields on it and if the form is empty than it should STOP submitting, otherwise allow me to execute the server side script

but its not happening, even my form is in invalid state (i do get error message saying i have to enter the required fileds) but still executing my server side script.

i would like to execute my server side script only if the form is in valid state.

here is my code: my master page

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Validation in ASP.NET Master Page</title>
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

my content page:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
      <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script type="text/javascript">
        $(document).ready(function() {
            $("#aspnetForm").validate({
                rules: {
                    <%=txtName.UniqueID %>: {
                        minlength: 2,
                        required: true
                    },
                     <%=txtEmail.UniqueID %>: {                        
                        required: true,
                        email:true
                    }
                }, messages: {
                    <%=txtName.UniqueID %>:{ 
                        required: "* Required Field *", 
                        minlength: "* Please enter atleast 2 characters *" 
                    }
                }
            });
        });
    </script>

    Name: <asp:TextBox ID="txtName" MaxLength="30" runat="server" /><br />
    Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
    <asp:Button ID="btnSubmit" runat="server" onclick="SubmitTheForm();" Text="Submit" />
</asp:Content>



function SubmitTheForm() {
    SaveTheForm();
}


function SaveTheForm() {
    debugger;
    var request = buildNewContactRequest();

    ContactServiceProxy.invoke({ serviceMethod: "PostNewContact",
        data: { request: request },
        callback: function(response) {     
            processCompletedContactStore(response);
        },
        error: function(xhr, errorMsg, thrown) {
            postErrorAndUnBlockUI(xhr, errorMsg, thrown);
        }
    });  
    return false; 
}

Developer IT