title: check if any of the input inside the form is empty
body: <p>What I'm trying to do is check if any of the inputs that have the required property are empty.
  If they do then alert "empty" but it only detects the first input. Any ideas, help?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
      $("button").click(function(){
          if(!$("form input[required]").val()){
              alert("empty");
          }
      });
  });</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=""&gt;
      &lt;div&gt;
          &lt;input type="text" required/&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;input type="text" required/&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;input type="text" required/&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;button&gt;test&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>