jQuery 验证的位置错误消息

Question

我有以下HTML。标签由 jQuery 验证插件插入，我认为我不能将它放在任何地方，只能直接跟在输入后面。如有必要，我可以轻松地在 "Invite Contact" 周围添加标签。

如何使用 CSS 或 API 将标签置于行内和 "Invite Contact" 文本之后？

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

Answer 1

您可以将复选框向右浮动，将标签向左浮动。您可以在邀请中添加一个 div 来控制它。

HTML

<p id="invite">
<span class="wrapper">
<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>
</span>
<strong>Invite Contact</strong>
</p>

CSS

#invite {
display:block;
width:100%;
height:250px;
background:#d7d7d7;
margin:0 auto;
text-align:center;
}
.wrapper {
background:white;
display:block;
border:2px solid #333;
height:20px;
width: 275px;
margin:0 auto;
}
.error {
float:right;
}
#invite-error {
float:left;
}

作为参考，查看我的代码笔here

Answer 2

如果您一开始就可以创建适当的 DOM 标记，请不要使用 CSS。

使用 jQuery 验证插件提供的 the errorPlacement option 覆盖默认消息放置。

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

引用OP:

"I could easily add a tag around the "Invite Contact" if necessary."

我用 <span> 标签包围了你的 "Invite Contact" 文本，并在演示中使用了这个功能...

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

工作演示：http://jsfiddle.net/8pawpsht/

可以使用条件限制为特定元素...

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

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

jQuery 验证的位置错误消息

Position error message with jQuery Validate

jquery

jquery-validate