jQuery Validation in ASP.NET

Question

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; 
}

i have tried both ways

1)

$(document).ready(function() {
        $("#btnSubmit").click(function(event) {
            event.preventDefault(); 
            SaveTheForm();
    });
});

2)

<asp:Button ID="btnSubmit" runat="server" onclick="SubmitTheForm();

  function SubmitTheForm() {
        SaveTheForm();
    }

Claudio Redi · Accepted Answer · 2010-05-17 18:23:09Z

4

you're posting your data without checking if the form is valid or not I think you have to use something like this

function SubmitTheForm() {
    if ($("#aspnetForm").valid()) SaveTheForm();
}

answered May 17, 2010 at 18:23

Claudio Redi

68.6k15 gold badges138 silver badges161 bronze badges

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

Comments

Tejs · Accepted Answer · 2010-05-17 17:52:23Z

0

Sorry, I'm giving you bad advice. Forget my previous entry. What is the SubmitTheForm() method? You're using the jQuery validation plug in, so you should just need to attach the validation stuff to the form and all should be right with the world.

edited May 17, 2010 at 17:52

answered May 17, 2010 at 17:36

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

1 Comment

Nick Kahn Over a year ago

validated - where does it coming from?, its throwing me an error

s_hewitt · Accepted Answer · 2010-05-17 18:11:26Z

0

I think your button onclick needs to be

return SaveTheForm();

As in:

<asp:Button ID="btnSubmit" runat="server" onclick="return SubmitTheForm();" Text="Submit" />

answered May 17, 2010 at 18:11

s_hewitt

4,31026 silver badges25 bronze badges

Comments

Emad Mokhtar · Accepted Answer · 2010-06-22 12:32:05Z

0

Do you try to put the jQuery code script in the Head ContentPlaceHolder

answered Jun 22, 2010 at 12:32

Emad Mokhtar

3,3075 gold badges33 silver badges49 bronze badges

Collectives™ on Stack Overflow

jQuery Validation in ASP.NET

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related