jQuery radio button value validation

Question

I'm using this in a form to check whether a radio button group has a certain value (Yes/No). The HTML for one of these is:

<form id="registerHere">
<div class="control-group">
<label class="radio">
    <input type="radio" value="Yes" name="freemedia">
    Yes
    </label>
    <label class="radio">
    <input type="radio" value="No" name="freemedia" checked="checked">
    No
    </label>
</div></form>

And I'm using the following JS (jQuery.validate.js is included):

<script type="text/javascript">
  $(document).ready(function(){});
$("#registerHere").validate({
            rules:{
                freemedia:{
                        required:true,
                        equalTo: "Yes"
                    },
                  },
            messages:{
                freemedia:{
                    required:"Please select",
                    equalTo:"Please apply to the 'freemedia' group first.</a>"
                },
                    },
        });
    });
  </script>

However, it is not checking the value correctly, as it always shows me the message, regardless of whether 'Yes' or 'No' is checked.

Where am I going wrong?

I think there is no provision for "equalTo" for radio button.You can check it by jquery on click event of radio button. — Sandip Karanjekar
– Sandip Karanjekar, Commented Dec 8, 2012 at 6:10

Kevin · Accepted Answer · 2012-12-08 07:12:56Z

I cleaned up some of your jquery, you had a few errors in there.

Also, digging around in the plugin I noticed that you can use the 'equalTo' parameter to specify which control is required. It just uses the 'equalTo' as a selector for a query. So if you treat your 'equalTo' setting as a jquery selector, it should work. It may be a bit of a hack, but I had it working.

All you need to do is assign an id to your radio buttons and you should be good to go

<div class="control-group">
        <label class="radio">
            <input id="chkYes" type="radio" value="Yes" name="freemedia" />
            Yes
        </label>
        <label id="chkNo" class="radio">
            <input type="radio" value="No" name="freemedia" />
            No
        </label>
        <input type="submit" value="Submit" />
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#registerHere").validate({
                rules:
                {
                    freemedia:
                    {
                        required: true,
                        equalTo: "#chkYes"
                    }
                },
                messages:
                {
                    freemedia:
                    {
                        required: "Please select",
                        equalTo: "Please apply to the 'freemedia' group first."
                    }
                }
            });
        });
    </script>

ameya rote · Accepted Answer · 2012-12-08 06:44:37Z

You want to check your value selected at the time of form submission ,That's the good way to do it Give a predefined selected radio button and then check the selected Radio at the time of form sub mission that what done here

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="radio" name="sex" value="Male" checked>Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown" >Unknown</input>

<div onclick="CheckMe();"> check Selected Radio button</div>
</body>
<script>
function CheckMe()
{
alert("value selected "+$('input:radio[name=sex]:checked').val());
}
</script>
</html>

Now Suppose you have not selected any Radio button by default then you can check that whether user has selected any radio butoon or not and if selected what is it? Following code helps you in doing that

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>

<div onclick="CheckMe();"> check Selected Radio button</div>
</body>
<script>
function CheckMe()
{
if ($('input:radio[name=sex]:checked').val())
alert("value selected "+ $('input:radio[name=sex]:checked').val());
else
alert("Please select Radio button");
}
</script>
</html>

Enjoy..!

Sandip Karanjekar · Accepted Answer · 2012-12-08 07:01:38Z

0

In jquery validation plug-in "equalTo" is used to compare value between the fields, not on same field.(It's my study if any one knows more about it.Please let me know.)
You can add your custom method to it.

$.validator.addMethod("check_for_yes", function(value, element) {
  return $('.freemedia').val() != "Yes"
}, "* Please apply to the 'freemedia' group first.");

Validation -

rules : {
 freemedia : {
     check_for_yes: true
 }
}

OR

You can check it on Jquery click event of radio button by showing alert.

edited Dec 8, 2012 at 7:01

answered Dec 8, 2012 at 6:23

Sandip Karanjekar

8601 gold badge6 silver badges23 bronze badges

3 Comments

17andLearning Over a year ago

Using this does not work, am I missing something? I did this and added a corresponding message for check_for_yes: , but it does not seem to work. Don't we have to make it return true/false using an if statement in the method?

Sandip Karanjekar Over a year ago

Add class "freemedia" to radio button.And i edited answer just now.Made id to class.I think this will help.

Kevin Over a year ago

@SandipKaranjekar if you take a look at my answer, you will see how you can use the "equalTo" as a selector for the field required

Collectives™ on Stack Overflow

jQuery radio button value validation

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related