title: Force user to fill all fields before enabling form submit
body: <p>I have a form containing various fields. </p>
  
  <p>See <a href="https://jsfiddle.net/v2rje245/" rel="noreferrer"><strong>jsFiddle demo</strong></a>. </p>
  
  <p>My aim is to enable the submit button only when the user has filled in all fields. </p>
  
  <p>So far, I'm able to force the title field to have content before submit button is enabled. How do I make it so that all other fields need to be filled too <strong>before</strong> submit button is enabled. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    jQuery("input[type='text']").on("keyup", function () {
          if (jQuery(this).val() != "" ) {
              if (jQuery("#titlenewtide").val() != '')
              {
                  jQuery("#subnewtide").removeAttr("disabled");
              }
          } else {
              jQuery("#subnewtide").attr("disabled", "disabled");
          }
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form action="#" method="post" id="new_tide"&gt;
          Title: &lt;input id="titlenewtide" type="text" name="title" required&gt; &lt;br&gt;
          Description: &lt;textarea name="description" id="description"&gt;&lt;/textarea&gt; &lt;br&gt;
          Tag:  &lt;input id="newtag" type="text" name="newtag" required&gt; &lt;br&gt;
          Category: &lt;input type="radio" name="category" value="19" required&gt; Animation
          &lt;button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled"&gt;Submit&lt;/button&gt; 
      &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Note that I am loading the JavaScripts in my footer.</p>