jQuery radio button value validation

html, javascript, jquery

Solution

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>

Problem

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?

Original source