使用jQuery Validate插件，如何在跨度中包装错误消息字符串 [英] Using the jQuery Validate plugin, how can I wrap the error message string in a span

问题描述

有人知道如何在跨度中包装内部错误字符串吗?我正在为表单使用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>

理由:我正在尝试获取文本字符串的像素宽度，并将该宽度应用于父容器.我的错误消息长度各不相同(有些短而有些长)，每条上都有鲜红色的背景.我不想为所有设置固定宽度，因为在我的设计中出现一条带有超长红色背景的短错误消息看起来很奇怪(反之亦然).

感谢您的帮助！

解决方案

使用 errorElement选项将每个项目包装在span中.

然后使用 wrapper选项将每个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/

Does anyone know how to wrap the inner error string in a span? I'm using the jQuery Validate plugin for my form and getting the default error message displaying in label tags, which is fine for now. Example:

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

I would like to wrap the error text string in a span so that I can get the pixel width of that text string. Would like it to look like this:

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

Reasoning: I'm trying to get the pixel width of the text string and apply that width to the parent container. I have varying error message lengths (some short and some long) with a bright red background on each. I do not want to set a fixed width for all because a short error message with a super long red background would look weird in my design (and vica versa).

Thanks for the help!

解决方案

Use the errorElement option to wrap each item in a span.

Then use the wrapper option to enclose each span within a label

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

Will give you...

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

For CSS & jQuery targeting, you don't need a special class as you can select like this...

label > span

OR more specifically...

label > span.error

DEMO: http://jsfiddle.net/s89ommhx/

这篇关于使用jQuery Validate插件，如何在跨度中包装错误消息字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！