JQuery validation not working for checkbox group

Posted by Chris Halcrow on Stack Overflow See other posts from Stack Overflow or by Chris Halcrow
Published on 2012-09-06T23:54:16Z Indexed on 2012/09/11 3:38 UTC
Read the original article Hit count: 230

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>

© Stack Overflow or respective owner

Related posts about ASP.NET

Related posts about controls