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>