invincibleme invincibleme - 3 months ago 20
HTML Question

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>




Answer

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>
Comments