title: jquery validation: submit button enabled only if all watched elements validate
body: <p>Watching multiple elements in a form, I would like to <strong>enable</strong> the submit button only when all elements successfully validate. Here's what I have attempted:-</p>
  
  <pre><code>$('#beta_signup_form').validate({
      rules: {
          name: {
              required: true,
              minlength: 4
          },
          email: {
              required: true,
              email: true 
          }
      },
      focusCleanup: true,
      onkeyup: false,
      errorElement: "span",
      submitHandler: function(form) {
          if ($('#beta_signup_form').valid()) {
              console.log("now we enable the submit button!");
          }   
      }
  
  });
  </code></pre>
  
  <p><strong>UPDATES</strong></p>
  
  <p>I was expecting the <code>submitHandler</code> to be triggered and the if <code>if ($('#beta_signup_form').valid())</code> condition to check that all our fields are valid, before we enable the submit button so that the user can click on it to make an ajax call to submit the form.</p>
  
  <p>But somehow, nothing gets triggered when all fields are valid.</p>
  
  <p>I figured out what I am getting wrong and that is the <code>submitHandler</code> attribute has nothing to do with detecting the "all fields validated" event.  The <code>submitHandler</code> attribute only gets fired if I click on my form button, which is not what I need.</p>
  
  <p>So my question is - which is the event I need to bind to? Is there an attribute that can be used for setting up a trigger when <strong>all fields in the form</strong> validate?</p>
  
  <p>Here's the form html code:-</p>
  
  <pre><code>    &lt;form id="beta_signup_form" postUrl="{% url 'signups_beta_users' %}" method="post" csrf_token="{{ csrf_token }}"&gt;{% csrf_token %}
          &lt;div&gt;
              &lt;input type="text" id="name" name="name" placeholder="Name" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="email" id="email" name="email" placeholder="Email address" /&gt;
          &lt;/div&gt;
          &lt;button class="btn btn-success" type="submit" id="request-trial" href="#request-for-free-trial"&gt;Notify Me&lt;/button&gt;
          &lt;div class="loading"&gt;&lt;/div&gt;
      &lt;/form&gt;
  </code></pre>