文本后的位置标签

我有以下的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>

来源

2015-01-05 user1032531

jQuery的验证具有与其中它把该消息的几个选项。您可以提供您自己的DIV并使用这些选项来告诉它使用它。 – Barmar

@Barmar谢谢巴尔玛。我不知道，并会检查出来。但我不确定这对我来说是一种选择。我把一个PHP脚本放在一起，它采用JSON，并使用它来创建客户端规则/消息以及服务器端最终验证。我相信它可以被修改，但并不容易。认为这可以用CSS来完成？ – user1032531

当您刚刚创建正确的DOM标记时，请勿使用CSS。 – Sparky

不要使用CSS时，你可以只在第一时间创建正确的DOM标记。

使用由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/

来源

2015-01-05 19:25:01 Sparky

如果我在表单中有多个输入，但只是想要放置一个不同于默认的输入，我会使用类似于：'errorPlacement：function（error，element）{var $ e = $（element）; error.insertAfter（？$ e.attr（ '身份证'）== '富' $ e.next（）：$ E）; }'？ – user1032531

@ user1032531，是的，你可以使用条件来限制某些元素。 http://jsfiddle.net/8pawpsht/2/ – Sparky

您可以将复选框右键悬浮，标签离开。你可以在邀请中添加一个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

来源

2015-01-05 19:15:26

文本后的位置标签

回答

相关问题