jQuery validate, radio button group, nesting issue

Question

I am trying to add a custom method to validate a group of radio buttons, using v1.9 of the jQuery validate plugin.

Contrary to this post, it is possible to have the same name attribute for radio button inputs, as long as any class rules are only applied to one of the inputs. jQuery validate then treats your input group as a single input.

This works when your inputs are children of a common parent, ie

<input type="radio" name="radiogroup" value="1" class="input-shipping" checked="checked">
<input type="radio" name="radiogroup" value="2">
<input type="radio" name="radiogroup" value="3">
<input type="radio" name="radiogroup" value="4">

But as soon as the html structure changes, the validation rules are not applied:

<div class="form-row">  
    <input type="radio" name="radiogroup" value="1" class="input-shipping" checked="checked">
</div>

<div class="form-row">          
    <input type="radio" name="radiogroup" value="2">
</div>

<div class="form-row">              
    <input type="radio" name="radiogroup" value="3">
</div>              

<div class="form-row">
    <input type="radio" name="radiogroup" value="4">        
</div>

Is anyone aware of a workaround for this issue? Class rules are added as follows:

$.validator.addClassRules({
    "input-shipping" : {
        required: true,
        dateselected: true
    }
});

$.validator.addMethod("dateselected", function(value, element) {
    console.log(element);
});

amigolargo · Accepted Answer · 2014-01-29 11:00:14Z

1

The reason the validation rule was not being called was that custom radio buttons were used, which set the CSS display value of inputs to none, and pseudo elements were styled up in place of the original inputs.

Once this was changed to visibility:hidden; the validator seemed to pick up the rule OK.

To create a custom method based on the value of the selected input, a further level of filtering was needed:

$.validator.addMethod("dateselected", function(value, element) {
    var radios = $('input[name='+element.name+']'),
    val = radios.filter(':checked')[0].value;
    console.log(val);
});

answered Jan 29, 2014 at 11:00

amigolargo

8302 gold badges8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery validate, radio button group, nesting issue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related