Could someone explain why my functions are not working?

Question

So I'm very new to JavaScript and I'm trying a very simple enter text and check it. It doesn't seem to work the way I want it to. I want all of the inputs to go through the checkInputs . After All of them are 100% I want it to check if hoursWorked and horlyRate are numbers above 0. It seems to just move on to the checkNumberValidation without checking if all inputs are filled.

I got:

    function checkNumbersValidation(field){
        if( isNaN(field) ) {
            field.value = "Must be a number";
            field.focus("");
        }
    }

    function checkInputs(field) {
        var test = false;
        do{
            if ( field.value === null || field.value.trim() === "" ) {
                field.value = "Input needed";
                //set focus
                field.focus("");
            }else if (field.value === "0") {
                field.value = "Can't be zero";
                field.focus("");
            }else {
                tests = true;
            }
        }while (test = false)
    }
    function handelCalcButtonClicked (e) {
        var passFirstTests = false;

        var textFields = ["fullName", "hoursWorked", "hourlyRate"];

        for( var i = 0; i < textFields.length; i ++ ) {
            var field = document.getElementById(textFields[i]);
            checkInputs(field);
        }

        if( **something** ) {

            var numberFields = ["hoursWorked", "hourlyRate"]

            for ( var i = 0; i < numberFields.length; i++ ) {
                field = document.getElementById(numberFields[i]);

                checkNumbersValidation(field);
            }
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("calcButton").addEventListener("click", handelCalcButtonClicked, false);
    });

clearly I don't know what I'm doing. In the function handelCalcButtonClicked I'm not sure how to move on the the next part (the part Saying something). Any help would be nice!

Answer 1

What about this:

function checkNumbersValidation(field) {
    if (isNaN(field)) {
        field.value = "Must be a number";
        field.focus("");
    }
}

function checkInputs(field) {
    if (!field.value || !field.value.trim()) {
        field.value = "Input needed";
        field.focus("");
        return;
    if (field.value === "0") {
        field.value = "Can't be zero";
        field.focus("");
    }
}

function handelCalcButtonClicked (e) {
    var textFields = ["fullName", "hoursWorked", "hourlyRate"],
        numberFields = [          "hoursWorked", "hourlyRate"],
        i,
        field;

    for (i = 0; i < textFields.length; i++) {
        field = document.getElementById(textFields[i]);
        checkInputs(field);
    }

    for (i = 0; i < numberFields.length; i++) {
        field = document.getElementById(numberFields[i]);
        checkNumbersValidation(field);
    }
}

document.addEventListener("DOMContentLoaded", function() {
document.getElementById("calcButton").addEventListener("click", handelCalcButtonClicked, false);
});

or:

function checkInput(field, isnumber) {
    if (!field) return;
    if (isnumber === true && isNaN(field)) {
        field.value = "Must be a number";
        field.focus("");
        return;
    }
    if (field.value === "0") {
        field.value = "Can't be zero";
        field.focus("");
        return;
    }
    if (!field.value || !field.value.trim()) {
        field.value = "Input needed";
        field.focus("");
    }
}

function handelCalcButtonClicked (e) {
    checkInput(document.getElementById('fullName');
    checkInput(document.getElementById('hoursWorked', true);
    checkInput(document.getElementById('hourlyRate', true);
}

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("calcButton").addEventListener("click", handelCalcButtonClicked, false);
});

Answer 2

Inside checkNumbersValidation you need to do the isNan call on field.value, not field:

 if( isNaN(field.value) )

If you want to know if all of your fields have gone through checkInputs and have passed, you will need checkInputs to return whether or not each field has passed:

function checkInputs(field) {
    if ( field.value === null || field.value.trim() === "" ) {
        field.value = "Input needed";
        //set focus
        field.focus("");
        return false;
    } else if (field.value === "0") {
        field.value = "Can't be zero";
        field.focus("");
        return false;
    }
    return true;
}

This will allow you to know if all fields have passed the check:

var passedAllChecks = true;
for( var i = 0; i < textFields.length; i ++ ) {
    var field = document.getElementById(textFields[i]);
    passedAllChecks = checkInputs(field) && passedAllChecks;
}
if(passedAllChecks) {
    /* do number validation stuff */
}