使用 jQuery Validate 插件，如何将错误消息字符串包装在跨度中答案

【问题标题】：Using the jQuery Validate plugin, how can I wrap the error message string in a span使用 jQuery Validate 插件，如何将错误消息字符串包装在跨度中
【发布时间】：2014-08-21 07:21:15
【问题描述】：

有谁知道如何将内部错误字符串包装在一个跨度中？我正在为我的表单使用 jQuery Validate 插件，并在标签标签中显示默认错误消息，目前这很好。示例：

<label class="error" for="email">This field is required</label>

我想将错误文本字符串包装在一个跨度中，以便我可以获得该文本字符串的像素宽度。希望它看起来像这样：

<label class="error" for="email"><span class="youreAwesome">This field is required</span></label>

推理：我正在尝试获取文本字符串的像素宽度并将该宽度应用于父容器。我有不同的错误消息长度（有些短，有些长），每个都有鲜红色的背景。我不想为所有人设置固定宽度，因为带有超长红色背景的简短错误消息在我的设计中看起来很奇怪（反之亦然）。

感谢您的帮助！

【问题讨论】：

如何获得span 的像素宽度而不是label 的像素宽度？换句话说，label 和span 都是内联元素，所以如果你能得到span 的宽度，你也能得到label 的宽度。我的观点是，我看不出以这种方式改变标记会有什么不同。

标签： jquery forms jquery-validate

【解决方案1】：

使用the errorElement option 将每个项目包装在span 中。

然后使用the wrapper option 将每个span 括在label 中

$('#myform').validate({
    errorElement: 'span',
    wrapper: 'label'
    ....

会给你...

<label><span class="error">This is Required</span></label>

对于 CSS 和 jQuery 定位，您不需要特殊的 class，因为您可以像这样选择...

label > span

或者更具体地说...

label > span.error

演示：http://jsfiddle.net/s89ommhx/

【讨论】：

有没有一种简单的方法可以在我的应用程序中完成一次。我有很多地方叫 $('#myform').validate()?
@AmteBlessed，查看文档中的.setDefaults() 方法。

【解决方案2】：

使用wrapInner。

$('.error').wrapInner( "<span class='youreAwesome'></span>");

根据操作评论：

$(".selector").validate({
  invalidHandler: function(event, validator) {
  $('.error').wrapInner( "<span class='youreAwesome'></span>"); 
   }
});

Fiddle

【讨论】：

没错，但我希望在实际验证过程中触发它。你知道如何将它添加到验证函数中吗？

【解决方案3】：

你可以像这样定义你的错误信息：

var validator = form.validate({
  rules: {
    username: {
      required: true,
      minlength: 3
    }
  },
  messages: {
    username: {
      required: '<span> required </span>',
      minlength: ''
    }
  },

【讨论】：

从来没有想过这个。我正在挖掘简单的方法，但是有一堆错误消息我必须添加到。有没有其他方法可以向 validate() 添加一个在验证过程中执行此操作的函数？