Javascript: How to loop through elements and call onblur handler for certain elements

Question

I have a case where I have a bunch of text boxes and radio buttons on a screen all built dynamically with various DIVs. There are onblur routines for all of the text boxes to validate entry, but depending on the radio button selection, the text box entry could be invalid when it was valid originally. I can't use onblur with the radio buttons because they could go from the radio button into one of the text boxes that was made invalid and create an infinite loop since I'm putting focus into the invalid element. Since each text box has its own special parameters for the onblur calls, I figure the best way to do this is to call the onblur event for the textboxes when the form gets submitted to make sure all entry is still valid with the radio button configuration they have selected. I also need it to stop submitting if one of the onblur events returns false so they can correct the textbox that is wrong. This is what I've written...

    for (var intElement = 0; intElement < document.forms[0].elements.length; intElement = intElement + 1)
    {
        if (document.forms[0].elements[intElement].name.substr(3) == "FactorAmount") // The first 3 characters of the name are a unique identifier for each field
        {
            if (document.forms[0].elements[intElement].onblur())
            {
                return false;
                break;
            }
        }
    }

return true;

I originally had (!document.forms[0].elements[intElement].onblur()) but the alert messages from the onblur events weren't popping up when I had that. Now the alert messages are popping up, but it's still continuing to loop through elements if it hits an error. I've stepped through this with a debugger both ways, and it appears to be looping just fine, but it's either 1) not stopping and returning false when I need it to or 2) not executing my alert messages to tell the user what the error was. Can someone possibly help? It's probably something stupid I'm doing.

The onblur method that is getting called looks like this...

function f_VerifyRange(tagFactor, reaMin, reaMax, intPrecision, sLOB, sIL, sFactorCode)
{
    var tagCreditOrDebit;
    var tagIsTotal;
    var tagPercentageOrDecimal;

    eval("tagCreditOrDebit = document.forms[0]." + tagFactor.name.substr(0,3) + "CreditOrDebitC");

    eval("tagIsTotal = document.forms[0]." + tagFactor.name.substr(0,3) + "IsTotal");
    eval("tagPercentageOrDecimal = document.forms[0]." + tagFactor.name.substr(0,3) + "PercentageOrDecimal");

    if (tagPercentageOrDecimal.value == "P")
    {
        reaMax = Math.round((reaMax - 1) * 100);
        reaMin = Math.round((1 - reaMin) * 100);

        if (parseFloat(tagFactor.value) == 0)
        {
         alert("Please enter a value other than 0 or leave this field blank.");

            f_SetFocus(tagFactor);
         return false;
        }

        if (tagIsTotal.value == "True")
        {
            if (tagCreditOrDebit.checked)
            {
                if (parseFloat(tagFactor.value) > reaMin)
                {
                 alert("Please enter a value less than or equal to " + reaMin + "% for a credit or " + reaMax + "% for a debit.");
                    f_SetFocus(tagFactor);
                 return false;
                }
            }
            else
            {
                if (parseFloat(tagFactor.value) > reaMax)
                {
                 alert("Please enter a value less than or equal to " + reaMin + "% for a credit or " + reaMax + "% for a debit.");
                    f_SetFocus(tagFactor);
                 return false;
                }
            }
        }
    }

    return true;
}

EDIT: I think I've figured out why this isn't working as expected, but I still don't know how I can accomplish what I need to. The line below...

            if (!document.forms[0].elements[intElement].onblur())

or

            if (document.forms[0].elements[intElement].onblur())

is not returning what the single onblur function (f_VerifyRange) is returning. Instead it is always returning either true or false no matter what. In the first case, it returns true and then quits and aborts the submit after the first textbox even though there was no error with the first textbox. In the second case, it returns false and runs through all the boxes. Even though there might have been errors (which it displays), it doesn't think there are any errors, so it continues on with the submit. I guess what I really need is how to get the return value from f_VerifyRange which is my onblur function.

Answer 1

First, for the love of god and all that is holy, stop writing native javascript and help yourself to some of that jQuery :)

Second, start using a validation framework. For jQuery, jQuery Validate usually works really well. It supports things like dependencies between different fields, etc. And you can also quite easily add new rules, like valid ISBN numbers, etc.

Edit: As for your code, I'm not sure that you can use onunload for this, as at that point there's no way back, you can't abort at that point. You should put this code on the onsubmit event instead.

Answer 2

This question is a bit too involved for me at this time of the night, but I will give you this bit of advice:

eval("tagCreditOrDebit = document.forms[0]." + tagFactor.name.substr(0,3) + "CreditOrDebitC");

This can be written in a MUCH better way:

tagCreditOrDebit = document.forms[0][tagFactor.name.substr(0,3) + "CreditOrDebitC"];

In javascript, anywhere where you can use dotted syntax, you can use square brackets.

document.body;
document['body'];
var b = 'body';
document[b];

Also, think about giving your forms some sort of identifier. I have no clue at all why document.forms[0] was the standard way to address a form for so long... if you decide to place another form on the page before this one, then everything will break!

Other ways to do it include:

// HTML
<form name="myFormName">

// Javascript
var f = document.myFormName;

or

<form id="myFormId">

var f = document.getElementById("myFormId")

Answer 3

I ended up solving this with a global variable. I originally set a value g_bHardEditsPassed to true assuming we will have no errors. Then in f_VerifyRange, everytime I return a value, I put a line before it to set the g_bHardEditsPassed variable to match. Then I modified the loop to look like this...

    g_bHardEditsPassed = true;

    for (var intElement = 0; intElement < document.forms[0].elements.length; intElement = intElement + 1)
    {
        if (document.forms[0].elements[intElement].name.substr(3) == "FactorAmount")
        {
            document.forms[0].elements[intElement].onblur()
            if (!g_bHardEditsPassed)
            {
                g_bHardEditsPassed = true;
                return false;
            }
        }
    }

    return true;

Thanks for everyone's suggestions. I'm sure that the jQuery thing especially will be worth looking into for the future.

Answer 4

You´re not getting any success with if (!...onblur()) because the return of onblur() is always undefined when used directly. OnBlur() is a Event Handler Function. Like you descovered, you have to create a workaround.