errorPlacement in jQuery Validation plugin with other options

Question

I want to show all my form errors on top of form along with the name of field. Right now if 14 fields are there, it's writing 14 errors along with "this field is required" 14 times. I want to show it with field name.

Second issue is for a group of checkboxes. I want at least two of them to be checked. That is from array of seven elements 2 checkboxes are required.

I want to add border red to the error element and remove it same time when it is correct.

My HTML

<form method="POST" class="regular_form bookingForm" id="apptBookingForm">
    <div id="error" class="error"><span>&nbsp;</span></div>
    <div id="summary" class="error"><span>&nbsp;</span></div>
    <div class="clr"></div>

    <div style="width:475px;">
        <div>
            <label>Select Doctor <span class="mandatory">*</span></label>
            <select name="doctor" class="required" style="width:475px;" >
                <option value="">Select Doctor</option>
                <?php for ($x = 0; $x < count($res_doctor); $x++) { ?>
                        <option value="<?= $res_doctor[$x]['id'] ?>">
                            <?= $res_doctor[$x]['first_name'] . " " . $res_doctor[$x]['last_name'] ?>
                        </option>
                    <?php } ?>
            </select>
            <div class="clr"></div>
        </div>
        <div>
            <div class="left m20">
                <label>From Month<span class="mandatory">*</span></label>
                <select name="start_month" class="required" style="width:150px;"  >
                    <option value="">Start Month</option>                          
                    <?php
                        $timing = "Dec";
                        for ($t = 0; $t < 12; $t++) {
                            $timing = date("M", strtotime("+1 Month", strtotime($timing)));
                            ?>
                            <option value="<?php echo $timing; ?>"><?php echo $timing; ?></option>                                       
                        <?php } ?>
                </select>
            </div>
            <div class="left m20">
                <label>To Month<span class="mandatory">*</span></label>
                <select name="end_month" class="required" style="width:130px;"  >
                    <option value="">End Month</option>
                    <?php
                        $timing = "Dec";
                        for ($t = 0; $t < 12; $t++) {
                            $timing = date("M", strtotime("+1 Month", strtotime($timing)));
                            ?>
                            <option value="<?php echo $timing; ?>"><?php echo $timing; ?></option>                                       
                        <?php } ?>
                </select>
            </div>
            <div class="left m0">
                <label>Select Year<span class="mandatory">*</span></label>
                <select name="year" style="width:135px;"  class="m0 required" >
                    <option value="">Choose Year</option>
                    <?php
                        $timing = date("Y");
                        for ($t = 0; $t < 20; $t++) {
                            ?>
                            <option value="<?php echo $timing; ?>"><?php echo $timing; ?></option>                                       
                            <?php
                            $timing = $timing + 1;
                        }
                    ?>
                </select>
            </div>
            <div class="clr"></div>
        </div>

        <div>
            <label>Select Time<span class="mandatory">*</span></label>
            <div class="left m20">
                <label>Morning<span class="mandatory">*</span></label>
                <select name="start_morning" class="required" style="width:106px; border-radius:5px; overflow:auto;"  >
                    <option value="">Start</option>
                    <?php
                        $timing = "07:30";
                        for ($t = 0; $t < 9; $t++) {
                            $timing = date("H:i", strtotime($timing) + ($minutes * 60));
                            ?>
                            <option value="<?php echo $timing; ?>"><?php echo $timing; ?></option>                                       
                        <?php } ?>
                </select>

                <select name="end_morning" class="required" style="width:106px; border-radius:5px; overflow:auto;"  >
                    <option value="">End</option>
                    <?php
                        $timing = "07:30";
                        for ($t = 0; $t < 9; $t++) {
                            $timing = date("H:i", strtotime($timing) + ($minutes * 60));
                            ?>
                            <option value="<?php echo $timing; ?>"><?php echo $timing; ?></option>                                       
                        <?php } ?>
                </select>
            </div>
            <div class="left m0">
                <label>Afternoon<span class="mandatory">*</span></label>
                <select name="start_afternoon" class="required" style="width:106px; border-radius:5px; overflow:auto;"  >
                    <option value="">Start</option>
                    <?php
                        $timing = "12:00";
                        $minutes = 30;
                        for ($t = 0; $t < 7; $t++) {
//                            $timing = date("H:i A", strtotime("+30 Minutes", strtotime($timing)));
                            $timing = date("H:i", strtotime($timing) + ($minutes * 60));
                            ?>
                            <option value="<?php echo $timing; ?>"><?php echo $timing; ?></option>                                       
                        <?php } ?>
                </select>

                <select name="end_afternoon" class="m0 required" style="width:106px; border-radius:5px; overflow:auto;"  >
                    <option value="">End</option>
                    <?php
                        $timing = "12:00";
                        for ($t = 0; $t < 7; $t++) {
                            $timing = date("H:i", strtotime($timing) + ($minutes * 60));
                            ?>
                            <option value="<?php echo $timing; ?>"><?php echo $timing; ?></option>                                       
                        <?php } ?>
                </select>
            </div>
            <div class="left m20">
                <label>Evening<span class="mandatory">*</span></label>
                <select name="start_evening" class="required" style="width:106px; border-radius:5px; overflow:auto;"  >
                    <option value="">Start</option>
                    <?php
                        $timing = "15:30";
                        for ($t = 0; $t < 8; $t++) {
                            $timing = date("H:i", strtotime($timing) + ($minutes * 60));
                            ?>
                            <option value="<?php echo $timing; ?>"><?php echo $timing; ?></option>                                       
                        <?php } ?>
                </select>

                <select name="end_evening" class="required" style="width:106px; border-radius:5px; overflow:auto;"  >
                    <option value="">End</option>
                    <?php
                        $timing = "15:30";
                        for ($t = 0; $t < 8; $t++) {
                            $timing = date("H:i", strtotime($timing) + ($minutes * 60));
                            ?>
                            <option value="<?php echo $timing; ?>"><?php echo $timing; ?></option>                                       
                        <?php } ?>
                </select>
            </div>
            <div class="left m0">
                <label>Night<span class="mandatory">*</span></label>
                <select name="start_night" class="required" style="width:106px; border-radius:5px; overflow:auto;"  >
                    <option value="">Start</option>
                    <?php
                        $timing = "20:00";
                        for ($t = 0; $t < 9; $t++) {
                            $timing = date("H:i", strtotime($timing) + ($minutes * 60));
                            ?>
                            <option value="<?php echo $timing; ?>"><?php echo $timing; ?></option>                                       
                        <?php } ?>
                </select>

                <select name="end_night" class="required" style="width:106px; border-radius:5px; overflow:auto;" class="m0"  >
                    <option value="">End</option>
                    <?php
                        $timing = "20:00";
                        for ($t = 0; $t < 9; $t++) {
                            $timing = date("H:i", strtotime($timing) + ($minutes * 60));
                            ?>
                            <option value="<?php echo $timing; ?>"><?php echo $timing; ?></option>                                       
                        <?php } ?>
                </select>
            </div>
            <div class="clr"></div>
        </div>
        <div>
            <label>Select Days<span class="mandatory">*</span></label>
            <span class="days"><input type="checkbox" name="day[]" class="required" value="checkbox" id="Checkbox_0">Mon</span>
            <span class="days"><input type="checkbox" name="day[]" class="required" value="checkbox" id="Checkbox_1">Tue</span>
            <span class="days"><input type="checkbox" name="day[]" class="required" value="checkbox" id="Checkbox_0">Wed</span>
            <span class="days"><input type="checkbox" name="day[]" class="required" value="checkbox" id="Checkbox_1">Thu</span>
            <span class="days"><input type="checkbox" name="day[]" class="required" value="checkbox" id="Checkbox_0">Fri</span>
            <span class="days"><input type="checkbox" name="day[]" class="required" value="checkbox" id="Checkbox_1">Sat</span>
            <span class="days m0"><input type="checkbox" name="day[]" class="required" value="checkbox" id="Checkbox_0">Sun</span>
        </div>
        <div class="clr"></div>
        <span class="btnSprite fright"><input type="submit" name="Submit" id="Submit" value="Submit"></span>
    </div>
</form>

jQuery

$(document).ready(function () {
    $("#apptBookingForm").validate({

        errorLabelContainer: "#error",
        //          wrapper: "li",
        showErrors: function (errorMap, errorList) {
            $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below.");
            this.defaultShowErrors();
        },
//        highlight: function (element, errorClass) {
//            $(element).fadeOut(function () {
//                $(element).fadeIn().css({
//                    borderColor: "red"
//                });
//            });
//        },
        submitHandler: function () {
            alert("Submitted!");
        }
    });
});

Answer 1

1) To have a custom message for each field, use the messages option and assign each one using the input's name attribute. In my example, the first input element contains name="field1".

$("#apptBookingForm").validate({
    messages: {
        field1: {
            required: "Field #1 is required"
        },
        field2: {
            required: "You must fill out field #2"
        },
        // etc.
    },
    // your other options, etc.
});

2) In order to have two checkboxes required from a group of seven, use the minlength rule. For this rule to work, all checkboxes must truly be in the same group; i.e. share the same name attribute. In this example, name="checkboxes[]" on all of them. (Note: since this name contains special characters, square braces [], you must enclose it in quotes.)

    rules: {
        'checkboxes[]': {
            required: true,
            minlength: 2
        }
    },

3) To have red border automatically appear and disappear around each input element, you simply need to get creative with your CSS. Since the input element with a pending validation error contains class="error", this is what you need to target.

input.error,
select.error,
textarea.error {
    border: 1px solid #ff0000;
}

Working DEMO: http://jsfiddle.net/T8rJx/