How to disable submit till only required fields are filled up
<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>