$('#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.

    $('#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.

• javascript
• jquery
• radio-button
• jquery-validate

• You need to show us the relevant HTML. Do all of the radio buttons in one group contain the same name? – Sparky Commented Jan 1, 2015 at 16:53

4 Answers 4

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/

Try it like like

<input type="radio" name="radioButtonName" value="1" />First
<input type="radio" name="radioButtonName" value="2" />Second

Rule:

{
    radioButtonName:"required"    
}

You could use this

$(".selector").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
}
});

For More Options you could check jquery validate plugin site

http://jqueryvalidation.org/validate/

Check this:-

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <style type="text/css">
        input.error 
        {
            border: solid 1px red;  
            color: Red;    
        }
    </style>
     <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#form").validate({
                rules: {
                    accountType: "required"
                },
                messages: {
                    accountType: "You must select an account type"
                }
            });
        });

    </script>
</head>
<body>
    <div>
        <form id="form" method="post" action="/">
            <label>Select an Account Type</label>
            <p>
                <input type="radio" name="accountType" value="1" id="accountType_C" /><label for="accountType_C" >Coder</label>
            </p>
            <p>
                <input type="radio" name="accountType" value="0" id="accountType_S" /><label for="accountType_S">Surreptitious Ninja</label>
            </p>
            <input type="submit" />
        </form>
    </div>
</body>
</html>