JQuery驗證隱藏錯誤容器

Question

我正在使用JQuery驗證插件，並且我有一些錯誤容器的問題。設置如下：

<div class="form-row"> 
      <label class="span3">First name</label> 
      <input data-ref-error="firstnameErrorLabel" class="span4" type="text" id="firstname" required/> 
     </div> 
     <div class="form-row-error" style="display:none;" id="firstnameErrorLabel"> 
      <div class="span4 text-error">Please enter a first name</div> 
     </div> 

$('#form').validate({ 
     errorPlacement: function (error, element) { 
       error.appendTo($('#' + element.data('ref-error'))); 
       $('#' + element.data('ref-error')).show(); 
     }, 
     submitHandler: function (form) { 
      form.submit(); 
     } 
    }); 

現在的問題是，一旦發生錯誤，errorContainer將不會再次隱藏。一旦沒有錯誤，我需要整個div被隱藏起來。問題是我不能使用通用的錯誤容器，因爲插件是在更大的代碼庫中使用的，錯誤容器可能是跨度或另一種情況下的不同（在這種情況下，它是一個div）。

任何人都可以幫忙嗎？

Answer 1

一個巨大的問題是您的輸入元素不包含name屬性。這是強制性爲了這個插件正常運作。

<input name="firstname" data-ref-error="firstnameErrorLabel" class="span4" type="text" id="firstname" required/> 

的問題是，我不能用一個通用的錯誤容器，因爲插件是一個較大的代碼庫中使用和錯誤容器可以是另一種情況跨度或不同的東西（在這種情況下，它是一個div ）。

最好允許插件自動控制錯誤消息。該插件提供a toolbox full of options以實現任何所需的HTML結構。

只需使用errorElement選項將錯誤容器更改爲div即可。然後修改errorPlacement，以便將消息放入其他div中，並應用所需的類。

$('#form').validate({ 
    errorElement: 'div', 
    errorPlacement: function (error, element) { 
     element.parent().next('div').html(error); 
     error.addClass('span4 text-error'); 
    }, 
    messages: { 
     firstname: { 
      required: "Please enter a first name" 
     } 
    } 
    .... 

下面的演示顯示了插件動態創建您想要的結構。調整需要...

DEMO：http://jsfiddle.net/2ckokp1L/

你開始標記：通過插件動態創建

<div class="form-row-error" id="firstnameErrorLabel"></div> 

DOM結構：

<div class="form-row-error" id="firstnameErrorLabel"> 
    <div id="firstname-error" class="error span4 text-error">Please enter a first name</div> 
</div>