Question

55

jquery validation rules for radio buttons

rated 0 times [ 62] [ 7] / answers: 1 / hits: 34493 / 10 Years ago, thu, january 1, 2015, 12:00:00

    $('#myform').validate({

    // other options & rules

});

I am using these rules for validating various fields of myform using there field names. Now I also have a couple of radio buttons to which i need to apply validation on with the rule: atleast one of the radio buttons need to be selected. Also I need to mention this .Myform is a form for streams and a nested form for stream_details as my association goes like this Stream has_many StreamDetail. And the radio buttons fall under the nested form. The problem here is the name of the radio button i got on inspect element was something weird like stream[stream_details_attributes][0][show_details][0]. Can't get how to apply validation on this. I though tried to put a class on the buttons and add rules on it. didn't work though.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mireyag

Add To Favorites

Follow

Total Points: 73

Total Questions: 107

Total Answers: 85

Location: Ukraine

Member since Sun, Dec 13, 2020

3 Years ago

mireyag questions

1 Discord.js V13 sending message attachments

Sun, Aug 15, 21, 00:00, 3 Years ago

1 How to clear react-select values on button click without adding it to options?

Thu, Feb 18, 21, 00:00, 3 Years ago

1 React Js : no such file or directory, open Package.json

Wed, Dec 16, 20, 00:00, 3 Years ago

1 How to import util module in Node.js?

Tue, Sep 1, 20, 00:00, 4 Years ago

1 React Select Creatable no options instead of create

Sun, Jul 5, 20, 00:00, 4 Years ago

View All

answered 10 Years ago oliverg · Accepted Answer

There are a few ways this can be done. It's hard to tell by your OP, but maybe #3 is what you'd need...

1. When the name is the same on every radio in the group...

    <input type=radio name=radioname /> <label>Yes</label>

    <input type=radio name=radioname /> <label>No</label>

    <input type=radio name=radioname /> <label>Maybe</label>

Then you can simply declare the required rule on this name and one radio out of the group will be required. (Since it's a type=radio sharing a name (same group), only one can be selected in the first place.)

$('#myform').validate({

    // other options,

    rules: {

        radioname: { // <- NAME of every radio in the same group

            required: true

        }

    }

});

2. When the name is different on each radio in the group...

    <input type=radio name=foo class=mygroup /> <label>Yes</label>

    <input type=radio name=bar class=mygroup /> <label>No</label>

    <input type=radio name=foobar class=mygroup /> <label>Maybe</label>

Then you can use the require_from_group rule that is part of the plugin's additional-methods.js file. The first parameter tells it how many from the group are required.

$('#myform').validate({

    // other options,

    rules: {

        foo: {

            require_from_group: [1, '.mygroup']

        },

        bar: {

            require_from_group: [1, '.mygroup']

        },

        foobar: {

            require_from_group: [1, '.mygroup']

        }

    }

});

3. When the name is different on each radio in the group AND you do not know the name attribute (although a name on each is still mandatory).

    <input type=radio name=foo class=mygroup /> <label>Yes</label>

    <input type=radio name=bar class=mygroup /> <label>No</label>

    <input type=radio name=foobar class=mygroup /> <label>Maybe</label>

Then you would declare the rules using the .rules('add') method. This method can be attached to any selector so you would not need to know the name attributes. (However, even though you're not using the name here, the plugin mandates that every input considered for validation contains a name.)

$('#myform').validate({

    // other options

});



$('.mygroup').each(function () {

    $(this).rules('add', {

        require_from_group: [1, $(this)]

    });

});

Working DEMO: http://jsfiddle.net/05qm3r4m/

You can use the groups option within .validate() to combine the error messages into one single message. Then use the errorPlacement option to place it precisely within your layout.

DEMO with combined messages: http://jsfiddle.net/05qm3r4m/1/