CODEWITHSUNDEEP
jqueryhtmlcssradio-button
Paul
Paul

Reputation: 11756

Why is this style not being added to my radio button?

I'm validating that part of my form is complete before submission and trying to add a class that will outline the radio button in red if it hasn't been selected. I'm triggering the alert so I know it's not checked but the style fails to get set. Any idea what I'm missing?

Here is my current code:

CSS:

.form_error {
    border-color: #ee5f5b;
}

JQuery:

        for (i=1;i<4;i++) {

            if (!$('input[name=answer'+i+']:checked').val()) {
                alert("Not checked");
                $("#question_answer"+i).addClass("form_error");
            }
        }

HTML:

<td>
    <input type="radio" id="question_answer1" name="answer1" value="1" >Yes
    <input type="radio" id="question_answer1" name="answer1" value="0" >No
</td>

Upvotes: 2

Views: 120

Answers (3)

Alan Lapington
Alan Lapington

Reputation: 1346

Could the issue be that the two inputs have the same ID attribute? As they are radio buttons it's ok for them to share a name but elements should never share an ID.

Upvotes: 4

JMM
JMM

Reputation: 26837

As others have stated, it may have to do with the duplicate id values. But there's no sense selecting the same elements using 2 different selectors anyway. Once you figure out the original problem, I suggest trying something like this:

for ( i = 1 ; i < 4 ; i++ ) {

  $( "input[name='answer" + i + "']" ).not( ":checked" ).toggleClass( "form_error", true );

}
// for

Upvotes: 2

Quentin
Quentin

Reputation: 944441

It is, you just can't tell because most browsers don't render radio buttons with borders.

Upvotes: 2

Related Questions