jQuery驗證插件中的errorPlacement與其他選項

我想在窗體頂部顯示我的所有表單錯誤以及字段名稱。現在，如果有14個字段，它會寫入14次錯誤，同時還會寫入14次錯誤。我想用字段名稱來顯示它。jQuery驗證插件中的errorPlacement與其他選項

第二個問題是針對一組複選框。我想至少要檢查其中的兩個。這是從七個元素的數組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!"); 
     } 
    }); 
});

來源

2013-08-07 Sankalp

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; 
}

工作DEMO：http://jsfiddle.net/T8rJx/

來源

2013-08-07 15:10:28 Sparky

jQuery驗證插件中的errorPlacement與其他選項

回答

相關問題