Stackoverflow Solution
Solution for the question posted here :
http://stackoverflow.com/q/9342711/314763
HTML
<form name="multilistings" id="multilistings">
<div id="step5" class="step">
<h2>Työhyvinvointia edistävä ympäristö</h2>
<fieldset>
<legend class="topic">Mitkä ovat työpaikalla käyttämäsi taukotilan hyvät ja mitkä kehitystä kaipaavat asiat?</legend>
<table>
<tr>
<td></td>
<td>kunnossa</td>
<td>kehitettävää</td>
</tr>
<tr class="errorbox">
<td>Tilan koko suhteessa käyttäjämäärään</td>
<td><input type="radio" name="tilan_koko" id="kunnossa1" value="kunnossa"></td>
<td><input type="radio" name="tilan_koko" id="kehitettavaa1" value="kehitettavaa"></td>
</tr>
<tr class="errorbox">
<td>Kalusteet</td>
<td><input type="radio" name="kalusteet" id="kunnossa2" value="kunnossa"></td>
<td><input type="radio" name="kalusteet" id="kehitettavaa2" value="kehitettavaa"></td>
</tr>
<tr class="errorbox">
<td>Verhot ja muu sisustus</td>
<td><input type="radio" name="verhot" id="kunnossa3" value="kunnossa"></td>
<td><input type="radio" name="verhot" id="kehitettavaa3" value="kehitettavaa"></td>
</tr>
<tr class="errorbox">
<td>Valaistus</td>
<td><input type="radio" name="valaistus" id="kunnossa4" value="kunnossa"></td>
<td><input type="radio" name="valaistus" id="kehitettavaa4" value="kehitettavaa"></td>
</tr>
<tr class="errorbox">
<td>Tilan siisteys ja järjestys</td>
<td><input type="radio" name="siisteys" id="kunnossa5" value="kunnossa"></td>
<td><input type="radio" name="siisteys" id="kehitettavaa5" value="kehitettavaa"></td>
</tr>
<tr class="errorbox">
<td>Tilan toimivuus taukotilana</td>
<td><input type="radio" name="toimivuus" id="kunnossa6" value="kunnossa"></td>
...
CSS
#container table {
width: 100%;
border: 0px;
}
table td {
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
table tr:nth-child(1) {
font-weight: bold;
}
col:first-child {
}
td:first-child + td,
td:first-child + td + td {
text-align: center;
}
tr.alert:nth-child(odd),
tr.alert:nth-child(even) {
background-color: #f00;
}
.error {
padding: 5px;
border: 1px solid #f00;
max-width: 40%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.alert {
border: solid 1px #f00;
}
JavaScript
var validate = function() {
var count = 0;
var fieldSetWithCheckboxes = $('#step5 .errorbox').each(function(index, item) {
if (($(item).find('input:radio').length > 0 && $(item).find('input:radio:checked').length === 0)) {
$(item).addClass('alert');
count++;
numItems = $('.alert').length;
alert('Errors = ' + numItems);
}
else{
$(item).removeClass('alert');
numItems = $('.alert').length;
if (numItems == 0) // No errors...
{
alert('NO ERRORS!');
}
}
});
return (count > 0) ? false : true;
};
$('#multilistings').submit(function() {
var result = validate();
return result;
});