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'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?

• javascript
• jquery
• html

Share Improve this question Follow asked Dec 8, 2012 at 5:45 17andLearning17andLearning 47711 gold badge88 silver badges1919 bronze badges 1

• 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 Commented Dec 8, 2012 at 6:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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>

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./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./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..!

In jquery validation plug-in "equalTo" is used to pare 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.