validate arbitrary checkbox group nicely

http://stackoverflow.com/questions/13692061/using-the-jquery-validate-plugin-to-check-if-one-or-more-checkboxes-with-differ

by ryleyb

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<form id="myForm">
            <div class="group">
            <label for="name" class="label">First Name*:</label>
            <input type="text" name="name"/>
            </div>

            <div class="group">
            <label for="surname" class="label">Last Name*:</label>
            <input type="text" name="surname"/>
            </div>
            <div class="group">
            <label for="surname" class="label">Some Checkboxes (choose one):</label>
            <input type="checkbox" name="field_themes[und][24]"/>
                <input type="checkbox" name="field_themes[und][29]"/>
                <input type="checkbox" name="field_themes[und][33]"/><span id="checkbox_errors"></span>
            </div>
            <div class="group">
            <label for="surname" class="label">Please Agree*:</label>
            <input type="checkbox" name="important"/>
            </div>           

            <div class="group">
            <label for="email" class="label">Email*:</label>
            <input type="text" name="email" />
            </div>

            <div class="group">
            <label for="telephone" class="label">Phone*:</label>
            <input type="text" id="telephone" name="telephone" />
            </div>

            <label for="extra" class="label">Extra:</label>
            <textarea class="small-area"></textarea>


            <div class="clear"></div>

            <button type="submit" class="send">Verzenden</button>
        </form>

CSS

.error {color: red; }

JavaScript

var tmpChecks = [],
    myRules = {
        telephone: {
            required: true,
            digits: true
        },
        name: {
            required: true
        },
        surname: {
            required: true
        },
        email: {
            required: true,
            email: true
        },
        important: {
            required: true
        }
    };

$('#myForm input[name^="field_themes[und]"]').each(function() {
    tmpChecks.push($(this).attr("name"));
    myRules[$(this).attr("name")] = {
        custom_checks: true  
    };
});

$.validator.addMethod("custom_checks", function(value, element) {
    return $('#myForm input[name^="field_themes[und]"]:checked').length > 0;
}, 'Please check one of these');


$("#myForm").validate({
    rules: myRules,
    groups: {
        checks: tmpChecks.join(' ')   
    },
    errorPlacement: function(error, element) {
        if (element.attr("name").match(/^field_themes\[und\]/)){
       $('#checkbox_errors').html(error);
        } else {
       error.insertAfter(element);
        }
    },    
    submitHandler: function(form) {
        alert('successful submit');
        return false;
    }
});