title: jQuery Validation in ASP.NET
body: <p>i have a strange situation may its a easy fix or something i may be missing but here is the question.</p>
  
  <p>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,</p>
  
  <p><strong>here is what i meant:</strong>
  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 </p>
  
  <p>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.</p>
  
  <p>i would like to execute my server side script only if the form is in valid state.</p>
  
  <p>here is my code:
  <strong>my master page</strong></p>
  
  <pre><code>&lt;%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;jQuery Validation in ASP.NET Master Page&lt;/title&gt;
      &lt;script src="Scripts/jquery-1.3.2.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="Scripts/jquery-1.3.2-vsdoc2.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="Scripts/jquery.validate.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;asp:ContentPlaceHolder id="head" runat="server"&gt;
      &lt;/asp:ContentPlaceHolder&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
          &lt;asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"&gt;
  
          &lt;/asp:ContentPlaceHolder&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>my content page:</strong></p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;
        &lt;asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"&gt;
  
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $("#aspnetForm").validate({
                  rules: {
                      &lt;%=txtName.UniqueID %&gt;: {
                          minlength: 2,
                          required: true
                      },
                       &lt;%=txtEmail.UniqueID %&gt;: {                        
                          required: true,
                          email:true
                      }
                  }, messages: {
                      &lt;%=txtName.UniqueID %&gt;:{ 
                          required: "* Required Field *", 
                          minlength: "* Please enter atleast 2 characters *" 
                      }
                  }
              });
          });
      &lt;/script&gt;
  
      Name: &lt;asp:TextBox ID="txtName" MaxLength="30" runat="server" /&gt;&lt;br /&gt;
      Email: &lt;asp:TextBox ID="txtEmail" runat="server"&gt;&lt;/asp:TextBox&gt;&lt;br /&gt;
      &lt;asp:Button ID="btnSubmit" runat="server" onclick="SubmitTheForm();" Text="Submit" /&gt;
  &lt;/asp:Content&gt;
  
  
  
  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; 
  } 
  </code></pre>
  
  <p><strong>i have tried both ways</strong></p>
  
  <p>1)</p>
  
  <pre><code>$(document).ready(function() {
          $("#btnSubmit").click(function(event) {
              event.preventDefault(); 
              SaveTheForm();
      });
  });
  </code></pre>
  
  <p>2) </p>
  
  <pre><code>&lt;asp:Button ID="btnSubmit" runat="server" onclick="SubmitTheForm();
  
    function SubmitTheForm() {
          SaveTheForm();
      }
  </code></pre>