0

我想在表单顶部显示所有表单错误以及字段名称。现在如果有 14 个字段，它会写入 14 个错误以及"this field is required"14 次。我想用字段名显示它。

第二个问题是一组复选框。我希望至少检查其中两个。也就是说，来自七个元素的数组需要 2 个复选框。

我想为错误元素添加边框红色，并在正确时将其删除。

我的 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!");
        }
    });
});
4

1 回答 1

2

1) 要为每个字段提供自定义消息，请使用该messages选项并使用输入的name属性分配每个字段。在我的示例中，第一个input元素包含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) 为了使一组七个复选框中需要两个复选框，请使用minlength规则。要使此规则起作用，所有复选框必须真正位于同一组中；即共享相同的name属性。在这个例子中，name="checkboxes[]"所有这些。（注意：因为它name包含特殊字符，方括号[]，你必须用引号括起来。）

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

3) 要让每个输入元素周围的红色边框自动出现和消失，您只需使用 CSS 进行创意。由于input具有未决验证错误的元素包含class="error"，因此这是您需要定位的内容。

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

工作演示：http: //jsfiddle.net/T8rJx/

于 2013-08-07T15:10:28.890 回答