CODEWITHSUNDEEP
javascripthtmlformsvalidation
javathehut
javathehut

Reputation: 41

highlight empty input fields

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.

	  function validatefilledIn() {
		  "use strict";
		  var arr = document.getElementsByName('qty');
		  var score = document.getElementById('total');
		  
		  for(var i=0; i<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;
			  }
			  
		  }
	  } 
          <form name="myForm" id="form1">
              <fieldset>
                   <input  type="text" name="qty"  id="qty1" oninput="findTotal()" class="hvr-pop" required/>   
                   <input  type="text" name="qty" id="qty2" oninput="findTotal()" class="hvr-pop" required/>    
                   <input type="text" name="qty"  id="qty3" oninput="findTotal()" class="hvr-pop" required/>    
                   <input type="text" name="qty" id="qty4" oninput="findTotal()" class="hvr-pop" required/>    
                   <input type="text" name="qty"  id="qty5" oninput="findTotal()" class="hvr-pop" required/>    
                   <input type="text" name="qty"  id="qty6" oninput="findTotal()"class="hvr-pop" required/>    
             </fieldset>
</form>

Upvotes: 2

Views: 7126

Answers (1)

petres
petres

Reputation: 582

With if(isNaN(arr[i].value) || arr[i].value == "") it does work!

function validatefilledIn() {
    var arr = document.getElementsByName('qty');
    for(var i=0; i<arr.length;i++){
        if(isNaN(arr[i].value) || arr[i].value == "") {
            $(arr[i]).val('').css( "border-color", "red" );
        }
    }
}

Full HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            function findTotal() {
            }
            function validatefilledIn() {
                var arr = $("[name='qty']");
                $.each(arr, function(i, o) {
                    if(isNaN($(o).val()) || $(o).val() == "") {
                        $(o).val('').css( "border-color", "red" );
                    } else {
                        $(o).css( "border-color", "green" );
                    }
                });
            } 
        </script>
        <form name="myForm" id="form1">
            <fieldset>
                <input type="text" name="qty" id="qty1" oninput="findTotal()" class="hvr-pop" required/>   
                <input type="text" name="qty" id="qty2" oninput="findTotal()" class="hvr-pop" required/>    
                <input type="text" name="qty" id="qty3" oninput="findTotal()" class="hvr-pop" required/>    
                <input type="text" name="qty" id="qty4" oninput="findTotal()" class="hvr-pop" required/>    
                <input type="text" name="qty" id="qty5" oninput="findTotal()" class="hvr-pop" required/>    
                <input type="text" name="qty" id="qty6" oninput="findTotal()" class="hvr-pop" required/>    
            </fieldset>
            <button onClick="validatefilledIn()">Check</button>
        </form>   
    </body>
</html>

Upvotes: 3

Related Questions