highlight empty input fields
<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>