Validating Radiobuttons in ASP.Net w/ jQuery

I have a group of radio buttons that I'm trying to validate with a custom validator in ASP. I know I can't use a Required Validator on these items because they aren't eligible for Required Validators in ASP.Net and I can't use a radio button list because I have a div that is shown in between the radio buttons if they are clicked

<asp:RadioButton ID="showYear" runat="server" CssClass="reportYear" GroupName="dateSelection"/>Show by calendar year
//// Div to show if showYear is Clicked
<asp:RadioButton ID="showDate" runat="server" CssClass="reportDates" GroupName="dateSelection"/>Show by date range
//// Div to show if showDate is Clicked

And here is the Custom Validator:

<asp:CustomValidator ID="validateGroup1" runat="server" Display="Dynamic" ErrorMessage="Please select option for step 1" ClientValidationFunction="validateDateStyle" ValidationGroup="validateYTDSearch" />

The problem I am having is this javascript function:

function validateDateStyle(oSrc, args) {

    $(document).ready(function () {

        var r1 = $('.reportDates').attr('checked');
        var r2 = $('.reportYear').attr('checked');

        alert(r1 + " " + r2);


    });

}

Upon triggering the function with the validator call it pops the window up wi开发者_StackOverflow中文版th

"Undefined Undefned" even when the radios are checked.

Any ideas why it won't properly pull the checked value?

Thanks

You can check for the checked state of a radio button using jQuery's .is() function and using the :checked pseudoselector:

if($('.reportDates').is(':checked')) {
  // do stuff
}

The reason you get an undefined when trying to reference the "checked" attribute is because that attribute does not exist for a radio button element when it is not checked/selected. Every time it is selected/unselected, the browser adds/removes that attribute, respectively.

Most likely what you're wanting to validate is that a radio button is selected. You could check every single radio button's checked state if you wanted to but then you have to change code in two places if you ever add or remove radio buttons at a later time.

Instead, you can use an easier solution which is similar to what Krof provides in his solution. The exception is that you check the radio button group. Since the group isn't an actual html element, you must select elements by the group name. When your page renders as an html page, the group name is selected by the "name" attribute like so.

$('[name$="dateSelection"]')

The "$=" operator simply translates to "ends with" since ASP.Net can possibly prefix the name with a content panel ID or something of the sort. It's a bit of a cheat, but is a simple way to select what you want.

What you get back is an array of the radiobuttons that have an attribute "name" with a value that ends in "dateSelection".

Now to determine if a radio button is selected in the group at all, you would do this:

$('[name$="dateSelection"]').is(':checked');

The resulting value tells you if a radio button in the group is selected or not and is a much more elegant solution than checking each individual radio button state. Not to mention, less bug prone when you add/remove buttons later on.