Question

我有以下HTML。标签是由jQuery验证插件插入的，我不认为我可以将它放在任何地方但直接跟随输入。我可以轻松地在＆＃34; Invite Contact＆＃34;周围添加一个标签。如果有必要的话。

我如何使用CSS或API将标签内嵌到＆＃34; Invite Contact＆＃34;之后？文本？

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

供参考，请查看我的codepen here

Answer 2

当你可以在第一时间创建正确的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 ：

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

我用"Invite Contact"标签包围了您的<span>文字，并在演示中使用了此功能......

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

DEMO 2：http://jsfiddle.net/8pawpsht/1/或http://jsfiddle.net/8pawpsht/2/

使用jQuery Validate定位错误消息

2 个答案: