Changing radio button to an image causes loss of jquery validation

Question

I had a standard set of radio button inputs that used jQuery Validate. It all worked just fine:

<div class="panel-heading">1. What is your impression of ... <label class="error SurveyError" for="Impression"></label></div>
....
<div><label><input type="radio" class="SurveyQuestion" name="Impression" value="Excellent"> Excellent</label></div>
<div><label><input type="radio" class="SurveyQuestion" name="Impression" value="Good"> Good</label></div>
...

And then this script to add validation:

$('.SurveyQuestion').each(function () {
    $(this).rules('add', {
        required: true,
        messages: {
            required: "Please answer this question."
        }
    });
});

Worked great. But now, I need to style the radio button with an image. So the HTML changed to this:

...
<div><input type="radio" id="q1a" class="SurveyQuestion" name="Impression" value="Excellent"><label for="q1a"><span></span>Excellent</label></div>
<div><input type="radio" id="q1b" class="SurveyQuestion" name="Impression" value="Good"><label for="q1a"><span></span>Good</label></div>
...

With this CSS:

input[type="radio"] {
    display:none;
}

input[type="radio"] + label span {
    display:inline-block;
    width:20px;
    height:20px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(/images/radio.png) no-repeat;
    cursor:pointer;
}

input[type="radio"]:checked + label span {
    background:url(/images/radio-selected.png) no-repeat;
}

Now, the styling looks great! But, the validation stopped working. Even with no answer, the form seems to think the question is valid... or... something.

I have noticed that if I leave the original checkbox visible...

input[type="radio"] {
    /*display:none;*/
}

... that the validation still works. So, for some reason when using a fake checkbox made out of images instead of the real checkbox made by the browser, the validation stops working.

And, (kind of a different subject, but as long as we're here) I also noticed that with the imaged radio buttons, it's no longer possible to TAB into this question. Hitting the tab just skips right over all of these radio buttons.

score 2 · Answer 1 · edited May 23 '17 at 12:00

2

By default, jQuery Validate doesn't check hidden fields. By setting your radio button to display: none, you are causing it to be skipped by the plugin.

You can change this behaviour by updating the plugin's ignore setting, as shown in this answer.

edited May 23 '17 at 12:00

Community

1
1

answered Feb 28 '17 at 18:54

Pat

25,237
6
71
68

score 1 · Accepted Answer · answered Feb 28 '17 at 18:51

1

You must be looking for-

input[type="radio"] {
    visibility: hidden;
}

to let them leave your document undisturbed-

input[type="radio"] {
    visibility: hidden;
    position: absolute;
    height: 0;
    width: 0;
}

Also to have them work in visibility hidden mode, wrap them in a label.

answered Feb 28 '17 at 18:51

Vishal Kumar Sahu

1,232
3
15
27

although, I still can't tab to these styled radio buttons. Any ideas on that? – Casey Crookston Feb 28 '17 at 18:56
:D I thought you must be in the need of the two keywords. – Vishal Kumar Sahu Feb 28 '17 at 18:57
I'm not sure what you mean. Maybe I should create a new question? I'm not using tabindex, and I'm hoping to avoid it as it's a VERY long form. – Casey Crookston Feb 28 '17 at 19:01
[See this](http://stackoverflow.com/questions/3059203/tab-index-on-div) It is related to your problem. Instead of div it is your image. You can tab through form elements only. (may be) – Vishal Kumar Sahu Feb 28 '17 at 19:02
1

instead of visibility hidden try `opacity: 0;` and assign a tab index... Although tab index will pick up the radio button not anything else. – Vishal Kumar Sahu Feb 28 '17 at 19:37

Changing radio button to an image causes loss of jquery validation

2 Answers2