使用jQuery Validate定位错误消息

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

我如何使用CSS或API在内联和“邀请联系人”文本后定位标签？

  Email is required if you wish to invite. Invite Contact  

Answer 1

当你可以首先创建正确的DOM标记时，不要使用CSS。

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

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

引用OP ：

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

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

 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/

Answer 2

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

HTML

 
   Email is required if you wish to invite.  Invite Contact  

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