title: Multiple forms on one page causes validation conflict due to required attribute
body: <p>I have two forms on a page: <code>register</code> and <code>sign-in</code>. </p>
  
  <p>The register form is simple and has some fields that have a required attribute e.g.</p>
  
  <pre><code>&lt;form name="register" id="register" method="post" enctype="multipart/form-data"&gt;
    &lt;input type="text" name="forename" required /&gt;
    .... many more fields here ...
  &lt;input type="submit" value="Register" /&gt;
  &lt;/form&gt;
  
  &lt;form name="sign-in" id="sign-in" method="post" enctype="multipart/form-data"&gt;
    &lt;input type="text" name="username" required /&gt;
    &lt;input type="password" name="password" required /&gt;
    &lt;input type="submit" value="Sign In" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The <code>sign-in</code> form just needs your username and password. But the problem is that when I click the submit button to sign-in, I get a validation error coming from the <code>register</code> form asking my to put in my forename. But I don't want to register! I just want to sign-in. Why is the submission of the sign-in form causing the register form to check validation?</p>
  
  <p>How can I fix this so they the forms behave entirely independently? I have using JQuery form validation and have a common validator that applies to all forms binded like this:</p>
  
  <pre><code>$('form').validate({
  // common validation rules in here
  )}
  </code></pre>
  
  <p>From the comments I can see that this is the issue. But how to resolve it and still have a common validation function for all forms on the site?</p>