title: highlight empty input fields
body: <p>I have a form where the user inputs numbers. A function is called on click. I want to highlight and empty any invalid fields (those that are not numbers). So far it highlights and clears all inputs. I need just the ones that are not filled in, or that have input that is not a number.</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 validatefilledIn() {
      "use strict";
      var arr = document.getElementsByName('qty');
      var score = document.getElementById('total');
      
      for(var i=0; i&lt;arr.length;i++){
       if(isNaN(parseInt(arr[i].value))) {
        
        alert("Please make sure all the fields are filled in.");
        $('input').val('').css( "border-color", "red" );
        $('#form1').find('#total').val('');
        return false;
       }
       
      }
     } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>          &lt;form name="myForm" id="form1"&gt;
                &lt;fieldset&gt;
                     &lt;input  type="text" name="qty"  id="qty1" oninput="findTotal()" class="hvr-pop" required/&gt;   
                     &lt;input  type="text" name="qty" id="qty2" oninput="findTotal()" class="hvr-pop" required/&gt;    
                     &lt;input type="text" name="qty"  id="qty3" oninput="findTotal()" class="hvr-pop" required/&gt;    
                     &lt;input type="text" name="qty" id="qty4" oninput="findTotal()" class="hvr-pop" required/&gt;    
                     &lt;input type="text" name="qty"  id="qty5" oninput="findTotal()" class="hvr-pop" required/&gt;    
                     &lt;input type="text" name="qty"  id="qty6" oninput="findTotal()"class="hvr-pop" required/&gt;    
               &lt;/fieldset&gt;
  &lt;/form&gt;    </code></pre>
  </div>
  </div>
  </p>