title: Inner form submit using jquery?
body: <p>I am using asp.net Master -content page. MasterPage already has root level <code>&lt;form&gt;</code> tag.
  My content page contact has another <code>&lt;form&gt;</code> tag area for validation purpose. </p>
  
  <p>When I submit form root level <code>&lt;form&gt;</code> executing instead of validation <code>&lt;form&gt;</code> tag.</p>
  
  <h2>MasterPage</h2>
  
  <pre><code>   &lt;form runat="server"&gt;
  </code></pre>
  
  <h2>Contactus.aspx</h2>
  
  <pre><code> &lt;form id="validForm"&gt;
      &lt;div class="control-group"&gt;
        &lt;label class="control-label" for="inputName"&gt;NAME&lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
            &lt;div class="controls"&gt;
                &lt;input type="text" class="span4" id="inputName" placeholder="Name"/&gt;
            &lt;span class="help-inline"&gt;Please fill your name&lt;/span&gt;
            &lt;/div&gt;
      &lt;/div&gt;                                         
      &lt;div class="control-group"&gt;
         &lt;label class="control-label" for="inputEmail"&gt;EMAIL&lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
            &lt;div class="controls"&gt;
              &lt;input type="text" class="span4" id="inputEmail" placeholder="Email"/&gt;
              &lt;span class="help-inline"&gt;Please correct your email&lt;/span&gt;
            &lt;/div&gt;
       &lt;/div&gt;                                        
       &lt;div class="control-group"&gt;
          &lt;label for="textarea" class="control-label"&gt;COMMENT&lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
          &lt;div class="controls"&gt;
              &lt;textarea rows="4" class="span8" id="textarea" runat="server" &gt;&lt;/textarea&gt;
              &lt;span class="help-inline"&gt;Please write a comment&lt;/span&gt;
          &lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="control-group form-button-offset"&gt;
             &lt;input type="submit" class="btn" value="Send Message" /&gt;
             &lt;%--   &lt;asp:Button class="btn" Text="Send Message" runat="server" id="btnSubmit" OnClick="btnSubmit_Click" /&gt;--%&gt;
      &lt;/div&gt;
  &lt;/form&gt;                                
                                  &lt;/div&gt;
  </code></pre>
  
  <h2>Mail_Validation.Js</h2>
  
  <pre><code>var $mjq = jQuery.noConflict();
  $mjq(function(){
      $mjq(document).ready(function(){
           $mjq(".help-inline").each(function() {
              $mjq(this).css('display', 'none');
           });
      });
      $mjq("#inputEmail").bind('blur', is_valid_email);
      $mjq("#inputName").bind('blur', is_valid_name);
      $mjq("#textarea").bind('blur', is_valid_comment);
      $mjq('#validForm').bind('submit', function() {
          return is_valid_form();
      });
  });
  </code></pre>
  
  <p>I have called exclusively <code>is_valid_form();</code> on button click, still parent form overriding this.</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
           $('.btn').click(function () {
               //$(this).closest('validForm')[0].submit();
               return is_valid_form();
           });
  </code></pre>
  
  <p>Now how to validate my form here.</p>