使用 jQuery Validate 定位错误消息答案

【问题标题】：Position error message with jQuery Validate使用 jQuery Validate 定位错误消息
【发布时间】：2015-01-05 18:57:19
【问题描述】：

我有以下 HTML。标签是由 jQuery 验证插件插入的，我认为我不能将它定位在任何地方，只能直接跟随输入。如有必要，我可以轻松地在“邀请联系人”周围添加标签。

如何使用 CSS 或 API 将标签内嵌并放置在“邀请联系人”文本之后？

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

【问题讨论】：

jquery-validate 有几个与消息放置位置相关的选项。您可以提供自己的 DIV 并使用这些选项告诉它使用它。
@Barmar 谢谢Barmar。我不知道，会检查一下。但是，我不确定这是否适合我。我整理了一个 PHP 脚本，它采用 JSON 并使用它来创建客户端规则/消息以及服务器端最终验证。我相信它可以被修改，但这并不容易。认为这可以仅使用 CSS 完成吗？
当您可以一开始就创建正确的 DOM 标记时，不要使用 CSS。

标签： jquery jquery-validate

【解决方案1】：

当您可以一开始就创建正确的 DOM 标记时，不要使用 CSS。

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

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

引用OP：

“如有必要，我可以轻松地在“邀请联系人”周围添加标签。”

我用<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/ 或 http://jsfiddle.net/8pawpsht/2/

【讨论】：

如果我在表单中有多个输入，但只想放置一个不同于默认值的输入，我会使用类似：errorPlacement: function (error, element) {var $e=$(element); error.insertAfter($e.attr('id')=='foo'?$e.next():$e); }吗？
@user1032531，是的，您可以使用条件来限制某些元素。 jsfiddle.net/8pawpsht/2

【解决方案2】：

您可以使复选框向右浮动，标签向左浮动。您可以在邀请中添加一个 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;
}

作为参考，请查看我的 codepen here

【讨论】：