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

我在输入中使用了很棒的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>

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

此字段必填。

我尝试使用errorPlacement函数，但无法使用。

您应该使用handler，它允许您定义一种将输入标记为无效的方法：

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
}

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

<div class="error">
   <label id="name-error" class="error" for="name">This field is required.</label>
   <input type="text" name="name" value="" />
</div>

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执行此操作的优点是，您的配置将应用于网站上的每个表单，

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

您可以使用指定元素的类型，例如

div

、

label

等。默认值为

标签

您可以使用内部的各种jQuery方法指定此错误消息元素的位置，例如在父元素之前、之后、内部等。默认值为

输入

元素的“后面”

但是，您不能轻松地将错误消息元素包装在

输入

元素周围。虽然可以使用jQuery在

errorPlacement

选项中执行此操作，但在需要清除错误时会出现问题。当需要清除错误消息时，插件将自动删除/隐藏错误消息元素，并且您的

输入

元素将被删除/隐藏

解决方案是自己创建外部

div

，并使用和选项切换此外部

div

上的错误类。您必须记住在

高亮显示

和

取消高亮显示

中也包含默认代码，否则默认行为将被破坏。由于所需的类是默认错误类，因此只需在

高亮显示

和

取消高亮显示

选项中使用

errorClass

参数即可

您的HTML：

<div>
   <input type="text" name="name" value="" />
</div>

$('#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
    }
});

<div class="error">
   <label id="name-error" class="error" for="name">This field is required.</label>
   <input type="text" name="name" value="" />
</div>

验证错误期间DOM中的最终结果：

<div>
   <input type="text" name="name" value="" />
</div>

$('#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
    }
});

<div class="error">
   <label id="name-error" class="error" for="name">This field is required.</label>
   <input type="text" name="name" value="" />
</div>

此字段必填。

请更具体地说明您需要帮助的内容。您需要显示相关代码的其余部分，以及对

.validate（）

方法的jQuery调用等。非常感谢您的回答，非常有帮助；-）祝您周末愉快nx，您的答案非常适合我们不调用的asp.net mvc。直接验证并仅依赖默认值