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

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

您应该使用 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 这样做的好处是您的配置将应用于您网站上的每个表单，

Answer 2

jQuery 验证插件自动创建和切换错误消息元素。

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

但是，您不能轻易地将错误消息元素包裹在 input 元素周围。虽然可以在 errorPlacement 选项中使用 jQuery 来执行此操作，但当需要清除错误时会出现问题。当需要清除消息时，该插件将自动 remove/hide 错误消息元素，并且您的 input 元素将与它一起 removed/hidden。

解决方案是自己创建外部 div 并使用 highlight and unhighlight 选项切换外部 div 上的错误 class。您还必须记住在 highlight 和 unhighlight 中包含默认代码，否则默认行为将被破坏。由于您想要的 class 是默认错误 class，您可以简单地在 highlight 和 unhighlight 选项中使用 errorClass 参数。

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

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

How to validate and wrap error message around input?

javascript

jquery

input

jquery-validate