我在输入中使用了很棒的jQuery validate插件：
<input type="text" name="name" value="" />
我想添加此结构（在输入周围添加div.error并在div中显示我的错误标签），如下所示：
<div class="error">
<label id="name-error" class="error" for="name">This field is required.</label>
<input type="text" name="name" value="" />
</div>
我尝试使用errorPlacement函数，但无法成功。
jQuery Validate插件会自动创建并切换错误消息元素。
您可以指定元素的类型，例如div，label使用等的errorElement选项。默认值为label。
您可以使用option内部的errorPlacement各种jQuery方法指定此错误消息元素的位置，例如在父对象之前，之后，内部。默认为input元素“之后” 。
但是，您不能轻松地将错误消息元素包装在该元素周围input。尽管可以在errorPlacement选项中使用jQuery来执行此操作，但是当需要清除错误时会发生问题。当需要清除消息时，该插件将自动删除/隐藏错误消息元素，并且您的input元素将与之一起被删除/隐藏。
解决方案是自己创建外部对象，div并使用highlight和unhighlight选项在外部对象上切换错误类div。您必须记住还要在其中包含默认代码highlight，unhighlight否则默认行为将被破坏。由于所需的类是默认的错误类，因此您可以简单地使用and选项中的errorClass参数。highlightunhighlight
您的HTML：
<div>
<input type="text" name="name" value="" />
</div>
您的.validate()方法：
$('#yourForm').validate({
// rules and options,
errorPlacement: function(error, element) {
error.insertBefore(element);
},
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass); // <- default behavior
$(element).parent('div').addClass(errorClass); // <- add error class to your parent div
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass); // <- default behavior
$(element).parent('div').removeClass(errorClass); // <- remove error class from your parent div
}
});
验证错误期间DOM的最终结果：
<div class="error">
<label id="name-error" class="error" for="name">This field is required.</label>
<input type="text" name="name" value="" />
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句