I have a form where i have groups of 5 radiobuttons and i set the required atribute on the first radio button. This allows me to use jquery.validate.js before submitting the form via jquery.form.js.
i want to use images instead of the browser standard radio buttons
i use the following CSS
input[type='radio']{
display:none;
}
input[type='radio']+span:before{
content: '';
display: inline-block;
width: 30px;
height: 30px;
background: url(images/radiobutton_off.png) no-repeat center bottom;
background-size: 28px 28px;
}
input[type='radio']:checked+span:before{
content: '';
display: inline-block;
width: 30px;
height: 30px;
background: url(images/radiobutton_on.png) no-repeat center bottom;
background-size: 28px 28px;
}
input[type='radio']:hover+span:before{
content: '';
display: inline-block;
width: 30px;
height: 30px;
background: url(images/radiobutton_on.png) no-repeat center bottom;
background-size: 28px 28px;
opacity: 0.5;
}
label{
cursor:pointer;
}
And i change the <input type=radio name=c$row_2[0] value='0' $sel0[$w] required>
to
<label><input type=radio name=c$row_2[0] value='0' $sel0[$w] required><span></span></label>
this works excelent for styling the radiobuttons, but the required atribute is not captured by jquery.validate.js
How can i assign the required atribute to CSS styled image radio buttons.
thanks for helping.
