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;
}

Answer 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;
        }

​