Javascript: Radio button group validation

Question

We have a webform and here is how the radio code is set up in this php form:

<input type="radio" name="2074" id="2074" value="Yes" class="valuetext" >Yes
<input type="radio" name="2074" id="2074" value="No" class="valuetext" >No

I'm working on some custom validation code that is fine for the text fields, but just hit a snag with radio buttons, so I'm sure this will be an issues for check-boxes

so here is the code that validates,

function blank(field) {
    if ((field.type == "text" || field.type == "textarea") && (field.value == " " || field.value == ""))
    {
        return true;
    }
    else if ((field.type ="radio" || field.type == "checkbox") && (!(field.checked || field.selected || field.selectedIndex > -1)))
    {
        return true;
    }
    else {
        return false;
    }
}

but when it comes to the radio buttons, it only checks the first radio button it runs into. so for example, if I run the validation and neither radio in the set is checked, it works, gives me the error message i needed, but that is only because it checked the first button, which was empty.

if I select "no", the second option of the radio, it does not work correctly, show me an error message when it should not

if I select "Yes" the first option of the radio, it works as expected.

How do I get JavaScript to grab all the radios in the group, check if any in that group are checked ?

Thank you in advance.

Function that gathers fields that need to be examined: *Also, that is a json script above this that provides the data for fieldlist*

var field = [], blankFields = [],
        listText = [], listItem = [], fieldId = [], label = [];

function checkRequired(fieldList) {
    for (var i = 0; i < fieldList.length; i++)
    {
        listText = fieldList[i];
        listText = listText.substring(1, listText.length - 1);
        listItem = listText.split("||");
        fieldId = listItem[0];
        label = listItem[1];
        field = document.getElementById(fieldId);

        if (visible(field) && blank(field)){
            blankFields.push(label);
        }
    }
    //return blankFields;
    if (blankFields.length > 0) {
        displayError(blankFields);
    }
}

I don't think you should have the same id's for multiple elements — Albinoswordfish, Jan 24 '13 at 18:37
no you really shouldn't but this is a legacy app we inherited and have not overhauled yet. — user1176783, Jan 24 '13 at 19:04

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

You can use document.getElementsByName("2074") and then iterate through to see if any are checked.

Related question: In JavaScript, how can I get all radio buttons in the page with a given name?

edited May 23 '17 at 11:56

Community

1
1

answered Jan 24 '13 at 18:35

aug

11,138
9
72
93

I can't use the specific name because several clients use the app so the ids and names, will be different. There is a function above this one that gathers all the fields that need to be checked. Not sure if it will help, but I will post it above. – user1176783 Jan 24 '13 at 18:39
well if you have all the fields stored in an array, which it appears you have, why don't you just iterate through them and check if the elements are checked? You can check which list you are dealing with by checking the length so you don't waste time looking through each one when you don't have to. – aug Jan 24 '13 at 18:50

score 0 · Accepted Answer · answered Jan 28 '13 at 14:04

I decided to mix in some jquery which made life tons easier:

else if (field.type=="radio")
                {
                 var radiocheck = $('input[type="radio"][name="' + field.name + '"]:checked').size() > 0;
                 if (radiocheck == false){
                     return true;

Javascript: Radio button group validation

2 Answers2