JQuery validation not working for checkbox group

Question

I'm having trouble getting JQuery validation to work with a set of checkboxes. I'm generating the checkboxes using an ASP.NET checkboxlist, and I've used JQuery to set the 'name' attribute to the same thing for each checkbox in the list. Here's the code that gets written to the browser. I'm setting the 'validate' attribute on the 1st checkbox to set the rule that at least one checkbox must be selected. The JQuery validation works for all other elements on the form, but not for the checkbox list. I'm also using a JQuery form wizard on the page which triggers validation for each 'page' of the form, so I don't have control over how the validation is called.

<input id="ContentPlaceHolder1_MainContent_AreaOfInterest_0" class="ui-wizard-content     ui-helper-reset ui-state-default" type="checkbox" value="Famine" name="hello[]" validate="required:true, minlength:1">
<label for="ContentPlaceHolder1_MainContent_AreaOfInterest_0">Famine</label>
<br>
<input id="ContentPlaceHolder1_MainContent_AreaOfInterest_1" class="ui-wizard-content ui-helper-reset ui-state-default" type="checkbox" value="Events Volunteer" name="hello[]">
<label for="ContentPlaceHolder1_MainContent_AreaOfInterest_1">Events Volunteer</label>

Any ideas on what's going wrong? There are lots of examples of JQuery scripts that will do the validation, however I'm trying to avoid this as I'm generating the checkboxlist server side by a custom control so that it can be re-used across different pages that may or may not have JQuery enabled. I'm trying to enable the JQuery validation whilst being as unobtrusive as possible, so that pages will still work even if JQuery is disabled.

Here are the relevant JQuery inclusions and JQuery initialisation script for the form wizard. I'm not using any initialisation code for JQuery validation:

<script type="text/javascript" src="../js/formwizard/js/bbq.js"></script>
<script type="text/javascript" src="../js/formwizard/js/jquery.form.js"></script>
<script type="text/javascript" src="../js/formwizard/js/jquery.form.wizard.js"></script>
<script type="text/javascript" src="../js/formwizard/js/jquery.validate.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#form1").formwizard({
            validationEnabled: true,
            focusFirstInput: true
        });
    });
</script>

Just to clarify, can you post the source and not the browser html? Thanks. Mike. — , Sep 07 '12 at 14:07
The issue isn't so much with the source code as I'm using JQuery plugins. The JQuery I've written is doing its job and writing out the validate="required:true, minlength:1" on the first checkbox in the list, which should ensure that JQuery validates the checkbox group and requires at least 1 checkbox is checked. I've applied JQuery validation and it's working fine on the other inputs. The code I've posted also shows the same 'name' is being used for both inputs. Since posting this code I've confirmed that the name should be an array value, so I've changed it to hello[] - still not working — Chris Halcrow, Sep 09 '12 at 21:00
Hi Mike - wanted to say thanks for the comment in my last reply but didn't have enough characters remaining! I've posted the only JQuery code that would really be relevant, in my original post. Cheers, Chris — Chris Halcrow, Sep 09 '12 at 21:11

score 0 · Answer 1 · answered Sep 11 '12 at 03:35

Using JQuery to set the 'name' of each checkbox to a consistent value 'breaks' the checkbox list in .NET (I thought this would happen). Basically it's too complex to use the JQuery forms wizard and JQuery validate with a customised .NET checkboxlist. They aren't really compatible. .NET needs to have different names for each of the checkboxlist inputs, which doesn't play well with JQuery validate (certainly not when also using the form wizard). I'm going to try switching off JQuery validation in the forms wizard (it has this option) to see if the form wizard will work OK with the validation (including client-side validation), of the .NET validators. I'll post back my results! Think I tried doing this originally and the form wizard wasn't working correctly, which is why I started using JQuery validation with the form wizard, so my current solution is just to just remove the multi-page form (the form's not too too long without this), to simplify things, and just rely on .NET validation (client and server side). Someone made the point that a multi-page form can leave the user wondering exactly how many field are left to fill, while at least a single page form allows them to see the fullness of what they need to complete!

This is the form wizard I am/was using:

http://thecodemine.org/

JQuery validation not working for checkbox group

1 Answers1