jQuery的驗證消息的造型錯誤

Question

由娜迪亞讓我們再回到errorplacement溶液（jQuery override default validation error message display (Css) Popup/Tooltip like）

我已經嘗試過了，它就像在Safari和Firefox魅力，但會導致IE08繞過jqueryvalidator並直接進入服務器端驗證器。

我的代碼是這樣 - 只要我插入'錯誤元素....它在IE08中是不穩定的。所有幫助非常感謝

<script type="text/javascript"> 
$(document).ready(function() { 
     $("#sampleform").validate({ 
     rules: { 
       dinername: "required", 
       venue: "required", 
       contact: "required", 
       dinertelephone: "required", 
       venuetime: "required", 
       numberdiners: "required", 
       dineremail: { required: true, email: true}, 
       datepicker: { required: true,date: true} 
       }, 

     messages: { 
       dinername: "Your name?", 
       numberdiners: "How many guests?", 
       dinertelephone: "Your mobile?", 
       venue: "Which restaurant?", 
       venuetime: "Your arrival time?", 
       datepicker: "Your booking date?", 
       dineremail: "Please enter a valid email address", 
       }, 

       errorElement: "div", 
       errorPlacement: function(error, element) { 
         element.before(error); 
         offset = element.offset(); 
         error.css('right', offset.right); 
         error.css('right', offset.right - element.outerHeight()); 
                 } 


      }); 
}); 

    </script> 

<script type="text/javascript"> 
$(function() { 
    $("#datepicker") .datepicker({minDate: 0, maxDate: '+6M +0D',dateFormat: 'DD, d M yy',onClose: function() {$(this).valid();} 

    }); 

    }); 
</script> 

Answer 1

您的問題是下面的代碼的最後兩行：（在解析值誤差「正確」宣言下降。）

offset = element.offset(); 
error.css('right', offset.right); 
error.css('right', offset.right - element.outerHeight()); 

火狐給出了一個警告，但它確實有效，但是，IE完全失敗。我在本地複製了您的代碼，並且一旦我將這些代碼發送出去，它也可以在IE上運行。如果你刪除了最後兩行，你也可以刪除第一行，因爲你不再需要它了。

基本上，如果你只使用了自定義錯誤放置，因爲你想擁有上述輸入字段，而不是它下面的錯誤信息，這就夠了：

errorElement: "div", 
errorPlacement: function(error, element) { 
     element.before(error); 
} 

然後，而不是使用jQuery添加用於定位錯誤元素的CSS屬性，我建議您只需在CSS文件中創建一個.error CSS類，並隨意擺弄它，而無需使用額外的jQuery代碼。

---

編輯：我在IE6，IE8和FF 3.6.4測試下面的代碼，以及，它工作得很好。

的HTML - 你可能想從這裏複製，因爲你原來的代碼有因未閉合的引號語法錯誤和遺漏屬性之間的空隙（整理你的代碼的其餘部分可能是一個好主意太）：

<form id="sampleform" action="bookingform.php" method="post"> 
    <fieldset class="contact"> 
     <legend>Your contact details</legend> 
      <div class="formfiller"> 
       <label for="dinername">Full name:</label><input name="dinername" id="dinername" type="text" /> 
      </div> 
      <div class="formfiller"> 
       <label for="dinertelephone">Telephone:</label><input name="dinertelephone" id="dinertelephone" type="text" /> 
      </div> 
      <div class="formfiller"> 
       <label for="dineremail">Email:</label><input name="dineremail" id="dineremail" type="text" /> 
      </div> 
    </fieldset> 
    <fieldset class="contact"> 
     <legend>Your booking details</legend> 
     <div class="formfiller"> 
      <label for="venue">Venue:</label> 
      <select name="venue" id="venue"> 
       <option value="" >-- Select Venue--</option> 
       <option value="Sunday Buffet">Sunday Buffet</option> 
       <option value="Tiffin Room">Tiffin Room</option> 
       <option value="Private Room">Private Room</option> 
       <option value="Restaurant">Main Restaurant</option> 
      </select> 
     </div> 
     <div class="formfiller"> 
      <label for="numberdiners">No of diners:</label><input name="numberdiners" id="numberdiners" type="text" /> 
     </div> 
     <div class="formfiller"> 
      <label for="datepicker">Date:</label><input name="datepicker" id="datepicker" type="text" /> 
     </div> 
     <div class="formfiller"> 
      <label for="venuetime"> Arrival time:</label> 
      <select name="venuetime" id="venuetime"> 
       <option value="">-- Select arrival time--</option> 
       <option value="12.00pm"> 12.00pm - lunch begins</option> 
       <option value="12.15pm">12.15pm</option> 

       <option value="12.30pm">12.30pm</option> 
       <option value="12.45pm">12.45pm</option> 
       <option value="1.00pm">1.00pm</option> 
       <option value="1.15pm">1.15pm</option> 
       <option value="1.30pm">1.30pm</option> 
       <option value="1.45pm">1.45pm</option> 
       <option value="2.00pm">2.00pm</option> 
       <option value="6.00pm">6.00pm - dinner begins</option> 

       <option value="6.15pm">6.15pm</option> 
       <option value="6.30pm">6.30pm</option> 
       <option value="6.45pm">6.45pm</option> 
       <option value="7.00pm">7.00pm</option> 
       <option value="7.15pm">7.15pm</option> 
       <option value="7.30pm">7.30pm</option> 
       <option value="7.45pm">7.45pm</option> 
       <option value="8.00pm">8.00pm</option> 
       <option value="8.15pm">8.15pm</option> 

       <option value="8.30pm">8.30pm</option> 
       <option value="8.45pm">9.45pm</option> 
       <option value="9.00pm">9.00pm</option> 
       <option value="9.15pm">9.15pm</option> 
       <option value="9.30pm">9.30pm</option> 
      </select> 
     </div> 
     <div class="formfiller"> 
      <label for="requirements">Queries:</label><textarea name="requirements" cols="35" rows="2" id="requirements"></textarea> 
     </div> 
    </fieldset> 
    <div id="enquiry"> 
     <button type="submit">BOOK NOW</button> 
    </div> 
</form> 

jQuery的腳本：

$(document).ready(function() { 
    /* Create Datepicker */ 
    $("#datepicker").datepicker({ minDate: 0, maxDate: '+6M +0D', dateFormat: 'DD, d M yy'}); 

    /* Validate the form */ 
    $("#sampleform").validate({ 
     rules: { 
      dinername: {required: true}, 
      venue: {required: true}, 
      dinertelephone: {required: true}, 
      venuetime: {required: true}, 
      numberdiners: {required: true}, 
      datepicker: {required: true}, 
      dineremail: {required: true, email: true} 
     }, 
     messages: { 
      dinername: {required: 'Your name?'}, 
      numberdiners: {required: 'How many guests?'}, 
      dinertelephone: {required: 'Your mobile?'}, 
      venue: {required: 'Which restaurant?'}, 
      venuetime: {required: 'Your arrival time?'}, 
      datepicker: {required: 'Your booking date?'}, 
      dineremail: { 
       required: 'Please enter an email address', 
       email: 'Please enter a valid email address' 
      } 
     }, 
     errorElement: "div", 
     errorPlacement: function(error, element) { 
      element.before(error); 
     } 
    }); 
}); 

你可能會注意到，我從VA取出date: true規則日期選擇框的蓋住。原因是這隻會驗證格式是xx/yy/zzzz而不是longday, xx yyy zzzz就像你擁有它。爲了驗證，您需要使用addMethod創建自定義驗證方法，但這是一個完全不同的蠕蟲病毒。

在IE6中，您可能會在datepicker上看到一個不需要的框，其中包含「false」一詞。這可以通過添加下面一行在你的CSS文件，可以輕鬆解決：

iframe.ui-datepicker-cover { display:none; } 

此外，在問候你對我用什麼調試的問題，這是Webdeveloper Toolbar for Internet Explorer爲IE和FireBug爲FF。

希望這能解決您的問題！