title: Add class to empty inputs
body: <p>I have the following code to search a form and detect empty inputs or unchecked boxes that we want to be compulsory. Unfortunately, this is adding the class .error to all elements with the class .required, even if they do contain content/have been checked.</p>
  
  <p>How would this script be tweaked in order to only add .error to empty elements? Is this even the best approach for validation?</p>
  
  <pre><code>$("#step-1-next").click(function(){
      var empty = $("#step-1").find("input.required").filter(function() {
          return this.value === "";
      });
      if(empty.length || !$("input[name='food']:checked").val() || $("#bus_type").val() == "") {
          $("#step-1").find(".required").addClass('error');
      } else {
          // Do something else
      }
  });
  </code></pre>