How can I validate in bootstrap that at least one checkbox is marked and pass this information to php?

Question

I'm using bootstrap and I created a form with 8 checkboxes. When user clicks "Submit" I want to verify if at least one checkbox is marked and if not - let user know with an error message below the checkbox group. Also, I would like to verify if the date that he puts is correct with my default data-form: 23/09/2015 05:45 PM

This is my java-script validation code:

$('#myform').validate({// initialize the plugin
    errorElement: 'div',
    rules: {
        datetimepicker: {
            required: true,
            date: true
        },
        commercialText: {
            required: true,
            minlength: 5
        },
        terms: {
            required: true,
            maxlength: 2
        }
    },
    submitHandler: function (form) { 
        var text = $("#customtext").val();
        var date = $("#datetimepicker").val();
        var stand = 2; 
        $.ajax({
            url: 'savedatanow.php',
            type: "POST",
            data: {
                text: text,
                date: date,
                stand: stand

            },
            dataType:'text',
            success: function(response)
            {

                alert(response);
            }
        });
        //alert('outside ajax');
    },
    highlight: function (element) {
        $(element).closest('.form-group').removeClass('success').addClass('has-error');
    },
    success: function (element) {
        element.addClass('valid')
            .closest('.form-group').removeClass('error').addClass('has-success');
    }                   
});

I prepared the following fiddle: http://jsfiddle.net/5WMff/1316/ but I have a problem with marking the correct error messages in red. When user doesn't check that he accepts the terms there's a weird situation happening too (the whole text is marked in red, not only the error)... Can you help me with that? Thanks!

Answer 1

Create custom validator for group of elements.

$.validator.addMethod( "at_least_one", function() {
    return $( "input[name='number[]']:checked" ).length;
}, 'Select at least one number' );

Add rule.

rules: {
    "number[]": "at_least_one",
    .....

Add name and value attributes to checkboxes, here is an example of how to creates an array of the selected values with square braces to the checkbox names. That way $_POST['number'] will be an array of checked values.

<input type="checkbox" value="two" name="number[]">

UPDATED FIDDLE

For dates you can use jQuery Datepicker or THIS SO question, basically create another custom validation method.

Now, there is still some issues with error messages and bootstrap, I hope that someone else will help you with that.