errorPlacement in jQuery Validation plugin with other options -
i want show form errors on top of form along name of field. right if 14 fields there, it's writing 14 errors along "this field required" 14 times. want show field name.
second issue group of checkboxes. want @ least 2 of them checked. array of 7 elements 2 checkboxes required.
i want add border red error element , remove same time when correct.
my 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 ($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"; ($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"; ($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"); ($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"; ($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"; ($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; ($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"; ($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"; ($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"; ($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"; ($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"; ($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!"); } }); });
1) have custom message each field, use messages option , assign each 1 using input's name attribute. in example, first input element contains name="field1".
$("#apptbookingform").validate({ messages: { field1: { required: "field #1 required" }, field2: { required: "you must fill out field #2" }, // etc. }, // other options, etc. }); 2) in order have 2 checkboxes required group of seven, use minlength rule. rule work, checkboxes must in same group; i.e. share same name attribute. in example, name="checkboxes[]" on of them. (note: since name contains special characters, square braces [], must enclose in quotes.)
rules: { 'checkboxes[]': { required: true, minlength: 2 } }, 3) have red border automatically appear , disappear around each input element, need creative css. since input element pending validation error contains class="error", need target.
input.error, select.error, textarea.error { border: 1px solid #ff0000; } working demo: http://jsfiddle.net/t8rjx/
Comments
Post a Comment