如何围绕输入验证和包装错误消息？

Question

我在输入上使用了很棒的jQuery验证插件：

<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函数，但我无法做到。

Answer 1

jQuery Validate插件自动创建并切换错误消息元素。

1. 您可以使用div指定元素的类型，例如label，the errorElement option等。默认是label。
2. 您可以使用the errorPlacement option中的各种jQuery方法指定此错误消息元素的位置，例如之前，之后，父级内部等。默认是“在input元素之后”。

但是，您无法轻松地将错误消息元素包装在input元素周围。虽然可以在errorPlacement选项中使用jQuery来执行此操作，但是当需要清除错误时会出现问题。当需要清除消息时，插件将自动删除/隐藏错误消息元素，并且您的input元素将被删除/隐藏。

解决方案是自己创建外部div并使用highlight和unhighlight选项来切换此外部div上的错误类。您必须记住在highlight和unhighlight中包含默认代码，否则默认行为将被破坏。由于您所需的类是默认的错误类，因此您只需在errorClass和highlight选项中使用unhighlight参数即可。

你的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>

Answer 2

您应该使用highlight处理程序，它允许您定义将输入标记为无效的方法：

jQuery.validator.setDefaults({
    highlight: function(element, error, valid){
        $(element).parent("div").addClass(error); 
        // or do whatever you want
    }
});

请注意，还有另一个名为unhighlight的处理程序，它也应该实现，但与第一个处理程序相反。这里有一个例子：

unhighlight: function(element, error, valid){
    $(element).parent("div").removeClass(error); 
    // or do whatever you want but in opposite way
}

您的问题的完整解决方案应如下所示：

jQuery.validator.setDefaults({
    highlight: function(element, error, valid){
        $(element).parent("div").addClass(error); 
    },
    unhighlight: function(element, error, valid){
        $(element).parent("div").removeClass(error); 
    }
});

请注意，上面的代码应该包含在网站上，最好是在你的jquery.validation.js之后，因为它改变了jQuery.validator的默认行为。通过jQuery.validator.setDefaults实现这一目标的优势在于您的配置将应用于您网站上的每个表单，