How to validate if radio button is selected or not using JQuery?

JavaScript
1

Hi there

this is my jsfiddle.net
http://jsfiddle.net/vngx/v3a16Ld0/1/

What I want is one value from both field(Male,Female) at least one value should be selected

How do I acheive this?

Thanks

2

You could use a required function for that, such as:

required: function() {
    return $('[name="userGender"]:checked').length >0; 
}
3

Where to add this method?

this is my code

4

It goes in the rules section of your validator.

5

updated

still not working

6

http://codepen.io/ryanreese09/pen/LVpbjV

7

Ahh yes, it will be required if the number of selected radio options is zero. Let’s flip things around a bit.

required: function() {
    return $('[name="userGender"]:checked').length === 0; 
}

That will work.

Due to how the error appears, you may want to use a custom error handler to place the radio button errors in their own special location after the radio buttons.

8

Thanks code is working now with custom error

Now I want display messages to be on last after “Female”

Now it is displaying in first

How to do this?

9

By using a custom error handler. Instructions on how to achieve this, along with code samples and working demos, have been provided in a recent thread between yourself and I.

10

And thread is this

(for future viewers of this thread)

11

this is my final working code for this thread

12

A few points before you finish - I would rename itemErrors to groupErrors so that it’s easier to understand what that section is for.

I also don’t think that your submit handler is needed. It’s just blindly duplicating what normally happens when you submit anyway. Remove that submitHandler and you also remove any possible confusion from it too, all to your benefit.

Also, along the top row of jsfiddle you’ll see some buttons. Try out the “tidy up” button and see what improvements it makes to your code.

Finally, use the JSHint button and it will tell you about some errors or problems that your code has. That can be useful to track down a few problems that are easy to fix up.

13

Update code
1)“ItemErrors” is replaced with “groupErrors”

2)By Pressing jsHint it is showing some message like on some lines “this will break in IE8”.
(I don’t Understand What it mean)

3)submitHandler code is removed

4)by pressing “tidy up” I don’t understand what Improvments it made my code

my new jsfiddle

14

It is the comma at the end of the group that will break IE8.

For example, this is good:

$("#registerForm").validate({
    rules: {
        userGender: {
            required: true
        }
    }
});

As it’s identical to the scripting engine to the following:

$("#registerForm").validate({rules: {userGender: {required: true} } });

Whereas, a bad comma example is:

$("#registerForm").validate({
    rules: {
        userGender: {
            required: true
        },
    }
});

And is seen by the scripting engine like this:

$("#registerForm").validate({rules: {userGender: {required: true}, } });

Basically that extra comma is supposed to mean that another group after it is to be expected. Earlier IE has trouble when that problem occurs.

Solution: Get rid of the bad comma.

It properly indents the code so that it is easier for a person to understand the structure of your code.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.