Javascript behaving weirdly

Question

Hi,

the following function does not work as I thought it should have. For some reason, the loop breaks whenever one the the validate function returns false. Why is that?

Here is my code :

function validateGroup(input) {
    if (!input.value.match(/^[0-9]{0,2}$/)) {
        $(input).addClass("invalidField");
        return false;
    }
    $(input).removeClass("invalidField");
    return true;
}

function validateClass(input) {
    if (!input.value.match(/^[a-zA-Z0-9-]{0,9}$/)) {
        $(input).addClass("invalidField");
        return false;
    }
    $(input).removeClass("invalidField");
    return true;    
}

function validateData() {
    var rows = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

    var valid = true;

    for (var i = 0, arrayLength = rows.length; i < arrayLength; ++i) {
        valid = valid && validateClass(rows[i].getElementsByTagName("input")[0]);
        valid = valid && validateGroup(rows[i].getElementsByTagName("input")[1]);
        valid = valid && validateGroup(rows[i].getElementsByTagName("input")[2]);     
    }
    return valid;
}

Thanks a lot!

Answer 1

It sounds like that is the intent of the function. The three lines of

valid = valid && validate...

mean that if any of the validate functions ever hits false valid will remain false for the rest of the loop.

Answer 2

the statement valid && validateClass(...) will not call the validateClass method if valid is false. I think what you want to do is change the order of those to

valid = validateClass(rows[i].getElementsByTagName("input")[0]) && valid;
valid = validateGroup(rows[i].getElementsByTagName("input")[1]) && valid;
valid = validateGroup(rows[i].getElementsByTagName("input")[2]) && valid;

Javascript doesn't bother evaluating the rest of an && expression if it already knows that the result is false.

Answer 3

It looks like you want to run the validate functions on each iteration even if ‘valid’ was already set to false. However the && operation you are using will short-circuit, so although the loop will continue the validate functions will not be called on subsequent iterations.

A really simple alternative which would work the way you want would be:

for (var i = 0, arrayLength = rows.length; i < arrayLength; ++i) {
   if(!validateClass(rows[i].getElementsByTagName("input")[0]))  valid = false;
   if(!validateGroup(rows[i].getElementsByTagName("input")[1]))  valid = false;
   if(!vvalidateGroup(rows[i].getElementsByTagName("input")[2])) valid = false;
}

Answer 4

I think it's because of the lazy evaluation scheme Javascript uses with &&. Try a single & instead.

Short-circuit evaluation: Support in common programming languages

Answer 5

It's called short-circuiting. Quick fix: replace each line with

valid = validateClass(rows[i].getElementsByTagName("input")[0]) && valid;