title: checking each required input for empty value with jQuery
body: <p>I am checking for each required fields in a form. I tried this but it only works for the first input. How can I make it work for each input? </p>
  
  <pre><code>if($('[required]').val() != ''){ 
          $('.button1').fadeIn(0);
          $('.button2').fadeOut(0);
  }else{
      $('.button1').fadeOut(0);
      $('.button2').fadeIn(0);
  }
  </code></pre>
  
  <p><strong>EDIT</strong>: for more context, here's another function I had below this to apply whenever they change and HTML code.</p>
  
  <pre><code>$('[required]').change(function() {
  if($('[required]').val() != ''){ 
          $('.button1').fadeIn(0);
          $('.button2').fadeOut(0);
      }else{
      $('.button1').fadeOut(0);
      $('.button2').fadeIn(0);
  }
  });
  </code></pre>
  
  <p><strong>HTML</strong> </p>
  
  <p>I have bunch of inputs like these:</p>
  
  <pre><code>&lt;input type="text" id="title" name="title" value="" required&gt;
  &lt;input type="text" id="size" name="size" value="" required&gt;
  &lt;input type="text" id="length" name="length" value="" required&gt;
  </code></pre>
  
  <p>buttons: </p>
  
  <pre><code>&lt;a class="button1" style="display:none" &gt;button 1&lt;/a&gt;
  &lt;a class="button2"&gt;button 2&lt;/a&gt;
  </code></pre>
  
  <p>So I want to check for empty fields when it the page loads and whenever they change.</p>
  
  <p>BTW, I don't have a form tag around these because it's for mobile and didn't think it's really necessary, if that makes any difference.</p>
  
  <p>Thanks again!</p>