Conditionally Validate an asp:RadioButtonList with JQuery Validation

Problem

I have an asp.net page that is set to use JQuery data validation. On the page is a RadioButtonList that has a few choices, one of which is “N.A.” (and has a value of “”)

<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem  Value="True">New</asp:ListItem>
<asp:ListItem Value="False">Upgrade</asp:ListItem>
<asp:ListItem Value="">N.A.</asp:ListItem>
</asp:RadioButtonList>

There are also quite a few textboxes that are being generated dynamically. If all of the textboxes have a value of “0”, then it doesn’t matter what is selected in the RadioButtonList. But, if any of the textboxes have a value>0, then the user must also select a choice other than “N.A.” in the RadioButtonList.

I could have written a JavaScript function to check all this, but I wanted to integrate this with the rest of the validation logic on the page. (again, using the JQuery validation plug-in.)

Solution

var ValidationFuncObj = { ValidationFunc: function () {
return  ($("input.Quantity").filter(function () {
return parseInt($(this).val()) > 0;
})).length > 0;
}
}

The above creates a new object that has one method: ValidationFunc. I’m trying to do conditional validation, and this will provide the condition. In this case, this function returns true if there are any textboxes (inputs) with a class of quantity that have a value > 0. So, if this function returns false, it won’t do any further validation on the RadioButtonList, but if it returns true, it will.

$("#RadioButtonList1_0").rules("add", {
RadioButtonListNA: ValidationFuncObj,
messages: {
RadioButtonListNA: "Server Installation is Required"
}
});

The above adds the validation rule, and passes in the object that contains the conditional function as a parameter. (Perhaps I’m missing something, but passing in the function directly didn’t work as well, thus I added it to an object and pass that, which works fine).

jQuery.validator.addMethod("RadioButtonListNA", function (val, el, ConditionalFuncObj) {
var parent = $(el).parent().attr('id');

if (ConditionalFuncObj.ValidationFunc()) {
var cnt = $("#" + parent + " :radio:checked[value!='']").length;
if (cnt == 0)
return false;
else
return true;
}
else {
return true;
}
}, "Please select an option");

The above:

  1. Gets the id of the parent of the element the rule was attached to. (It’s attached to one of the generated option buttons, so the parent is the span that contains all of the option buttons)
  2. Calls the validationFunc to determine if validation is needed. (if not, the function returns true and the RadioButtonList is considered to be valid).
  3. If the ValidationFunc returns false, then the user should not be allowed to choose NA. To check, it gets the count of the number of checked radio elements within the parent that don’t have a value of “”.
  4. If the count is zero, then “NA” is still selected; return false.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s