Validate if all radio button groups are checked

Question

I took the edit from this SF link: StackOverflow link, where user Blazemonger showed a demo in, JFiddle Demo

From the above: 1) How do I show all the error(s), not just one at a time, in a DIV statement below the submit button instead of the alert box? 2) How do i change the bg color back to white once the error is correct and the submit button is pressed again?

I edited the fiddle like this for Question 2, which is not working:

$("form").submit(function() {
    var submitme = true;
    $(':radio').each(function() {
        nam = $(this).attr('name');
        if (submitme && !$(':radio[name="'+nam+'"]:checked').length) {
            alert(nam+' group not checked');
            $(':radio[name="'+nam+'"]+label').addClass('error');
            submitme = false;
        }
        if (submitme && $(':radio[name="'+nam+'"]:checked').length <> 0) {
                $(':radio[name="'+nam+'"]+label').addClass('noerror');
        }
    });
    return submitme;
});

CSS:

.error {
    background-color: red;
}
.noerror {
    background-color: white;
}

Sushanth -- · Accepted Answer · 2012-09-24T18:29:23.443

1

On the click of the button you can check if one value in each group is selected and if not display a div ..

Check this UPDATED FIDDLE

$("form").submit(function() {
    var html = '';
    var submitme = true;
    $(':radio').each(function() {
        nam = $(this).attr('name');
        if (!$(':radio[name="'+nam+'"]:checked').length) {
            $(':radio[name="'+nam+'"]+label').addClass('error');
            if(html.indexOf(nam) < 0){
                html += nam +' group not checked' + '</br>';
            }
            submitme = false;
        }
    });
    if(submitme == false){
       $('.errorDiv').empty().append(html).show().addClass('error');
    }
    else{
      $('.errorDiv').hide();
    }

    return submitme;
});

        
        .error {
            background-color: red;
            display:none;
        }

edited Sep 24 '12 at 18:29

answered Sep 24 '12 at 17:54

Sushanth --

55,259
9
66
105

Thanks for the fiddle. How can I also change the text color of the unchecked radio group to RED along with your error div? And it only lists one group and not both if left unchecked? – Interfaith Sep 24 '12 at 18:04
Just add this line $(':radio[name="'+nam+'"]+label').addClass('error'); – Sushanth -- Sep 24 '12 at 18:05
I updated the Fiddle: http://jsfiddle.net/aVVW9/14/ 1) if you leave both unchecked and press submit it changes text color only for the first group, not all (maybe we need a for statement?) 2) The error DIV shows one error at a time, if you leave both unchecked, the error shows the first not both. 3) When I check the first group and leave the second group empty, shouldn't it change the text back to black for the corrected error? – Interfaith Sep 24 '12 at 18:09
Check the Updated fiddle above.. Need to remove submitme && in the if statement – Sushanth -- Sep 24 '12 at 18:14
Sorry one more request, I want one error message per group. How would it be incorporated? – Interfaith Sep 24 '12 at 18:16
Check the fiddle and code above.. Just add this condition if(html.indexOf(nam) < 0){ – Sushanth -- Sep 24 '12 at 19:41
http://jsfiddle.net/aVVW9/19/ .... Everything is working fine. thank you. the correct response should change back to default... i am thinking. – Interfaith Sep 24 '12 at 20:24

Validate if all radio button groups are checked

1 Answers1