Objective: Fix the code below, and understand why focusing on radio buttons doesn't work like focusing on text input boxes.

Question: Why does this not work:

function isValidRadio(elem, helperMsg) {
    var valid = false;
    for (var i = 0; i < elem.length; i++) {
        if (elem[i].checked) {
            return true;
        }
    }
    alert(notice);
    setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
    return false;
}

...when this does:

function isValidText(elem, notice) {
    var str = elem.value;
    var re = /.+/;
    if(!str.match(re)) {
        alert(notice);         
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    } else {
        return true;
    }
}

Example Code:

function focusElement(formName, elemName) {
    var elem = document.forms[formName].elements[elemName];
    elem.focus();
    elem.select();
}
function validateForm(form) {
    if (isValidText(form.phone, "Fail."))  {
        if (isValidRadio(form.yesNo, "Fail."))  {
            return true;
        }
        return false;
    }
}
<form id='myForm' action='/formPage/collectinfo/' method='post' accept-charset='UTF-8' name="myForm">
    <input name="phone" type="text" maxlength="14" size="14" />
    <input type="radio" name="yesNo" value="Yes"> Yes <input type="radio" name="yesNo" value="No" > No
<input type="submit" value=" Submit " name="Submit" onclick="return validateForm(myForm)" />

Details: I'm using php/javascript/html and so far I've only been testing this piece in Chrome. The form works just fine and the validation works up until it hits isValidRadio. The alert runs, but then the javascript breaks. A code fix would be great, but I wouldn't mind 'fishing for a life time...'

Objective: Fix the code below, and understand why focusing on radio buttons doesn't work like focusing on text input boxes.

Question: Why does this not work:

function isValidRadio(elem, helperMsg) {
    var valid = false;
    for (var i = 0; i < elem.length; i++) {
        if (elem[i].checked) {
            return true;
        }
    }
    alert(notice);
    setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
    return false;
}

...when this does:

function isValidText(elem, notice) {
    var str = elem.value;
    var re = /.+/;
    if(!str.match(re)) {
        alert(notice);         
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    } else {
        return true;
    }
}

Example Code:

function focusElement(formName, elemName) {
    var elem = document.forms[formName].elements[elemName];
    elem.focus();
    elem.select();
}
function validateForm(form) {
    if (isValidText(form.phone, "Fail."))  {
        if (isValidRadio(form.yesNo, "Fail."))  {
            return true;
        }
        return false;
    }
}
<form id='myForm' action='/formPage/collectinfo/' method='post' accept-charset='UTF-8' name="myForm">
    <input name="phone" type="text" maxlength="14" size="14" />
    <input type="radio" name="yesNo" value="Yes"> Yes <input type="radio" name="yesNo" value="No" > No
<input type="submit" value=" Submit " name="Submit" onclick="return validateForm(myForm)" />

Details: I'm using php/javascript/html and so far I've only been testing this piece in Chrome. The form works just fine and the validation works up until it hits isValidRadio. The alert runs, but then the javascript breaks. A code fix would be great, but I wouldn't mind 'fishing for a life time...'

• javascript
• html
• radio-button

• Please don't eval your setTimeout callbacks. – SeanCannon Commented Jan 23, 2013 at 19:46
• @AlienWebguy: I started messing with those because they were mentioned as a possible solution to this sort of problem (obviously they didn't work). I'm happy to nix them, but would love a bit more detail on what's wrong with them. (Beyond they are unnecessary, which I assume.) – lostphilosopher Commented Jan 23, 2013 at 19:49
• 1 It's just frowned-upon syntax to use setTimeout("myfunction()",0); versus setTimeout(function(){ myfunction(); }, 0); – SeanCannon Commented Jan 23, 2013 at 20:32

1 Answer 1

Alright, I found the solution, AlienWebguy put me on the right track thinking about arrays. I just needed to specify which radio button to focus on as opposed to which set. Here is the working code:

// Validate that the user has checked one of the radio buttons
function isValidRadio(radio, helperMsg) {
    var valid = false;
    for (var i = 0; i < radio.length; i++) {
        if (radio[i].checked) {
            return true;
        }
    }
    alert(helperMsg);
    radio[0].focus();
    return false;
}

Called via: isValidRadio(form.yesNo, "Error.") Thanks for the assist.