使用jQuery Validate定位错误消息 [英] Position error message with jQuery Validate

问题描述

我有以下HTML.该标签是由jQuery验证插件插入的，我认为我不能将其放置在任何地方，而是直接在输入之后.如有必要，我可以轻松地在邀请联系人"周围添加标签.

I have the following HTML. The label is inserted by the jQuery validation plugin, and I don't think I could position it anywhere but directly following the input. I could easily add a tag around the "Invite Contact" if necessary.

我如何使用CSS或API在邀请联系人"文本后内联放置标签?

How could I use CSS or the API to position the label inline and after the "Invite Contact" text?

<p id="invite">
    <input type="checkbox" checked="" value="1" name="invite" class="error">
    <label id="invite-error" class="error" for="invite">Email is required if you wish to invite.</label>
    Invite Contact
</p>

推荐答案

当您仅可以首先创建适当的DOM标记时，请勿使用CSS.

Don't use CSS when you could just create the proper DOM markup in the first place.

使用jQuery Validate插件提供的 errorPlacement选项覆盖默认消息位置.

Use the errorPlacement option that is provided by the jQuery Validate plugin to override the default message placement.

$('#myform').validate({
    // other options,
    errorPlacement: function(error, element) {
        error.insertAfter(element); // <- default, change this to whatever you need
    }
});

引用OP :

如有必要，我可以在邀请联系人"周围轻松添加标签."

我用<span>标签将您的"Invite Contact"文本括起来，并在演示中使用了此功能...

I surrounded your "Invite Contact" text with <span> tags and used this function in the demo...

errorPlacement: function (error, element) {
    error.insertAfter($(element).next());
}

工作示例: http://jsfiddle.net/8pawpsht/

Working DEMO: http://jsfiddle.net/8pawpsht/

可以通过使用条件...来限制到某个元素.

Can be restricted to a certain element by using a conditional...

errorPlacement: function (error, element) {
    if ($(element).attr('id') == 'foo') {
        error.insertAfter($(element).next());
    } else {
        error.insertAfter(element); // <- default
    }
}

演示2: http://jsfiddle.net/8pawpsht/1/或 http://jsfiddle.net/8pawpsht/2/

DEMO 2: http://jsfiddle.net/8pawpsht/1/ or http://jsfiddle.net/8pawpsht/2/

这篇关于使用jQuery Validate定位错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！