How to jQuery validate custom radio buttons - jquery-validate

Question

The form
<form id="form_reg" name="form_reg" method="post" action="">
<input type="radio" id="y" name="opt" value="y"><label for="y"><span>YES</span></label>
<input type="radio" id="n" name="opt" value="n"><label for="n"><span>NO</span></label>
<button id="reg_submit" value=" " type="submit"></button>
</form>
JS Validation
$().ready(function() {
$("#form_reg").validate({
rules: {
opt:{
required: true
}
},
messages: {
opt: {
required: "Select one "
}
}
});
$("#form_reg").validate();
})
This works good until I add CSS
input[type="radio"] {
display:none;
}
input[type="radio"] + label span {
width:27px;
height:25px;
background:url(/images/radio.svgz) no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
width:27px;
height:25px;
background:url(/images/radio_a.svgz) no-repeat;
cursor:pointer;
}
I guess this is because the default radio buttons are hidden.
How can I validate this form with these custom radio inputs?

Answer 1

To perform a validation on hidden fields you need to override the default 'ignore' setting with an empty array
$(function() {
$("#form_reg").validate({
ignore:[],
rules: {
opt:{
required: true
}
},
messages: {
opt: {
required: "Select one "
}
}
});
});
Presumably you have a good reason to want to require a radio button that the user can't see. For instance when validating a form that is spread across several jquery ui tabs for instance, some fields may be hidden when the form is submitted.
Don't call validate twice on document ready also - although it does no harm there is no point the second call won't do much.