highlight empty input fields

Question

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>

Answer 1

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>

highlight empty input fields

Question

1 answers

solution1
0 ACCPTED 2016-08-17 15:37:29

highlight empty input fields

Question

1 answers

solution1 0 ACCPTED 2016-08-17 15:37:29

solution1
0 ACCPTED 2016-08-17 15:37:29