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?

Answer 1

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>