Javascript 变量错误标签的正确位置-引导/Jquery

我有一个表单，每个输入前面都有一些错误标签-在右边

我可以使用以下方法控制每个错误的正确位置：

if(element.attr("name") == "id"){
   error.css( "right", "-95px" );
   }

然后我可以将标签精确地放在每个输入的前面2-3个像素

但是

问题是：

一些输入有2或3个不同的错误消息

每个标签都有不同的宽度，因为有些邮件比其他邮件短

我可以通过以下方式控制每个宽度：

min-width: 100px;
max-width: 200px;
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
white-space: nowrap;

最小/最大宽度+白色空格NOWRAP

当我把标签放在右边-错误1为100px-信息显示正常-输入外有2-3个像素

当消息更改为ERROR2时，标签较大的最大消息-标签显示在输入中

如果消息很短，则标签显示在输入外10-12像素

发生这种情况是因为标签向左侧延伸，而不是向右侧延伸

我如何才能选择标签成长的正确方向

例如：

在屏幕中间放置一个点>今天，最大宽度从中心到右边。

我怎样才能从中间走到左边

浮动

以下是我认为更好的理解问题的方法：D

请尝试输入全名

太多了

使用左边距将对您有所帮助。检查这个

JS

---

注意：由于箭头的原因，我在宽度上增加了7px

嗨@j-santosh！首先，非常感谢您的时间和帮助！好主意，但是-我以前没有说过-我使用右对齐，因为当我使用左对齐并更改网格视图时，请尝试演示-最小化窗口并更改窗口大小-标签位置会变得疯狂。。使用“右位置”时，标签始终显示在正确的位置，但标签的大小存在此问题-如果我更改为“左”，我会更正大小问题，但在多重网格中效果不佳。。有什么想法吗？太多了！Daniel您的意思是错误不应偏离其位置？只需将input group类添加到输入的父元素，并使用左边距：7px表示箭头，标签永远不会与输入元素脱节。如果这是你想要的，那么我会更新我的答案。

errorPlacement: function (error, element) {
ElementWidth = parseFloat($(element).outerWidth()) + 7;
if (element.attr("name") == "id") {
       error.css("margin-left", ElementWidth + 'px');
}
if (element.attr("name") == "name") {
       error.css("margin-left", ElementWidth + 'px');
}
if (element.length) {
      error.insertAfter(element);
} else {
      error.insertAfter(element);
}
},