JQuery ASP.Net Validation CheckBoxList

Question

Before starting, I would like to say that the code created by ASP.NET for CheckBoxLists is probably the worst thing I've ever seen.

Anyway

I am using the jQuery validation plugin to validate an ASP.net form. Some checkboxes need to be checked. They are generated by the CheckBoxList control.

<asp:CheckBoxList ID="CBContext" runat="server" RepeatColumns="2" DataSourceID="sqlLibraryEnquiries" DataTextField="value" DataValueField="value" name="topic"> </asp:CheckBoxList> 

This control produces the following abomination xHTML

 <table id="MainContent_CBContext" name="topic"> <tr> <td> <input id="MainContent_CBContext_0" type="checkbox" name="ctl00$MainContent$CBContext$0" value="Business" /><label for="MainContent_CBContext_0">Business</label> </td> <td> <input id="MainContent_CBContext_2" type="checkbox" name="ctl00$MainContent$CBContext$2" value="Legal" /><label for="MainContent_CBContext_2">Legal</label> </td> </tr> <tr> <td> <input id="MainContent_CBContext_1" type="checkbox" name="ctl00$MainContent$CBContext$1" value="Business Development" /><label for="MainContent_CBContext_1">Business Development</label> </td> <td> <input id="MainContent_CBContext_3" type="checkbox" name="ctl00$MainContent$CBContext$3" value="Library" /><label for="MainContent_CBContext_3">Library</label> </td> </tr> </table> 

The problem I ran into is getting the jQuery Validator plugin to connect to the checkbox list. In the "My Rules" section for all other fields, I can get their names for them, for example, ctl00 $ MainContent $ tbActions: but all the flags have different names.

The cb_selectone rule does not start because the object that I am trying to check has not been found. I have tried the following identifiers. CBContext, ctl00 $ MainContent $ CBContext, MainContent_CBContext and checkboxes.

 $("#Form1").validate({ rules: { //WHAT GOES HERE???? --------->> CBContext or ctl00$MainContent$CBContext or MainContent_CBContext or checkboxes all don't work: { cb_selectone: true } } }); 

Thanks for your help.

CM

Answer 1

Ok, I decided it ......

I created a new validation method that gets all input objects of a type that match the regular expression MainContent_CBContext. This returns an array of all flags.

Then roll around the array and check if attr is checked. If any of them then sets the return value to true.

 $.validator.addMethod('cb_selectone', function (value, element) { if (debug) { $.jGrowl("Adding Validation"); } var chkGroup = $("input[id^=MainContent_CBContext]"); if (chkGroup.length > 0) { for (var i = 0; i < chkGroup.length; i++) { if ($(chkGroup[i]).attr('checked')) { if (debug) { // alert(i + $(chkGroup[i]).val()); $.jGrowl("Running loop " + i + " = " + $(chkGroup[i]).val()); } return true; } } return false; } return false; }, 'Please select at least one option'); 

The part I was stuck on was finding an object to hide the addMethod code. In the end, I just used ...

 ctl00$MainContent$CBContext$2: { cb_selectone: true } 

This meant that the label was placed next to this field, it was purely cosmetic. The important thing is that the validator code was finally bound to the real object and correctly launched.

CM

Answer 2

I made a little tweak in the JAVASCRIPT method:

 $.validator.addMethod('cb_selectone', function (value) { if ($('[id$=CBContext] input:checked').length > 0) { return true; } else { return false; } }, "" ); 

Answer 3

How does rendering a list make it complicated. I would think about creating my own verification method and using the identifier of the root control, and the verification method would analyze the internal child elements:

• http://docs.jquery.com/Plugins/Validation/Validator/addMethod
• http://randomactsofcoding.blogspot.com/2008/10/starting-with-jquery-how-to-write.html

Answer 4

You tried something like this:

 $("#Form1").validate({ rules: { <%=CBContext.UniqueID %>: { cb_selectone: true } } }); 

Answer 5

 $("input:checked") 

- a selector that captures all checked flags

I used this for a simple check, for example:

 function testChecks() { var n = $("input:checked").length; if (n > 6) { alert("Please select up to six attributes."); return false; } if (n < 1) { alert("You must select at least one attribute."); return false; } return true; } 

I think you could just do

 $("input:checked").add("input:not(:checked)").Validate({ //.... });