title: How to use jQuery toggleClass to optimize code
body: <p>I wrote this code that validates input fields for empty values.<br>
  It works, but I realized with jQuery toggleClass, I might be able to improve upon it or optimize it.<br>
  But I  can't figure a way out.<br>
   Any help will be appreciated.</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> $(function() {
  
     $('.cont').on('click', '#submit', function(event) {
       event.preventDefault();
  
       $('.cont input').filter(function() {
  
         return !this.value.trim();
  
       }).addClass('highlight');
  
     });
  
     //remove red borders if field contains input
     $('.cont').find('input').blur(function(event) {
       if ($(this).val() &amp;&amp; $(this).hasClass('highlight')) {
         $(this).removeClass('highlight');
       }
     });
   })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.highlight {
    border-color: red
  }</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;div class="cont"&gt;
    &lt;input type="text" name="firstname" placeholder="Firstname"&gt;
    &lt;input type="text" name="lastname" placeholder="Lastname"&gt;
    &lt;button id="submit"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>