title: How to disable submit till only required fields are filled up
body: <p>I have searched but I get info about how to disable submit button till <code>all fields</code> are completed....</p>
  
  <p>I have following form where some fields are <code>required</code> and some are <code>optional</code>. </p>
  
  <p><strong>I want to disable submit button till <code>required</code> fields are completed.</strong></p>
  
  <p>sample code of form :</p>
  
  <pre><code>&lt;form name="registration_form" id="registration_form" action="nextaction.php" method="post" enctype="multipart/form-data" &gt;
  Name : &lt;input type="text" id="name" name="name" required&gt;
  Email : &lt;input type="text" id="name" name="name" required&gt;
  Mobile : &lt;input type="text" id="mobile" name="mobile" required&gt;
  Gender : &lt;input type="text" id="gender" name="gender" &gt;/*optional*/
  Occupation : &lt;input type="text" id="occupation" name="occupation" &gt;/*optional*/
  City : &lt;input type="text" id="city" name="city" required&gt;
  Avatar : &lt;input type="file" id="avatar" name="avatar" required&gt;
  
  &lt;input type="submit" class="link-button-blue" id="register" value="PROCEED TO NEXT STEP" /&gt; 
  </code></pre>
  
  <p>===========</p>
  
  <p><strong>Edited</strong></p>
  
  <p>what I have tried for submit disable untill all field completed as follows :</p>
  
  <p><strong>First Thing :</strong></p>
  
  <pre><code>&lt;input type="submit" class="link-button-blue" id="register" value="PROCEED TO NEXT STEP" disabled="disabled" /&gt; 
  </code></pre>
  
  <p><strong>script :</strong></p>
  
  <pre><code>   &lt;script&gt;
      $(document).ready(function (){
      $('form &gt; input').keyup(function() {
  
       var empty = false;
        $('form &gt; input').each(function() {
          if ($(this).val() == '') {
              empty = true;
          }
       });
  
        if (empty) {
           $('#register').attr('disabled', 'disabled');
        } else {
           $('#register').removeAttr('disabled'); 
        }
     });
  });        
  &lt;/script&gt;
  </code></pre>