我想在表单顶部显示所有表单错误以及字段名称。现在，如果有14个字段，它会写入14个错误和"this field is required" 14次。我想用字段名称来显示它。
第二个问题是针对一组复选框。我想要至少检查其中两个。这是从七个元素的数组2复选框是必需的。
我想在error元素中添加border red，并在正确的时候删除它。
我的HTML
<form method="POST" class="regular_form bookingForm" id="apptBookingForm">
<div id="error" class="error"><span> </span></div>
<div id="summary" class="error"><span> </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!");
}
});
});
答案 0 :(得分：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;
}