javascript - 变量错误标签的正确位置 - Bootstrap/Jquery

Question

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

我可以使用这个来控制每个错误的正确位置:

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

当我为 ERROR1 放置标签“Right -100px”时 - 消息显示正常 - 输入外有 2-3 个像素。

当消息更改为 ERROR2(带有较大标签的最大消息)时 - 标签显示在输入中。

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

发生这种情况是因为标签向左增长 - 而不是向右增长..

如何选择正确的标签成长方向？

例子:

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

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

float ？

这是 https://jsfiddle.net/4v2br346/ (我认为这是理解问题的更好方法..:D)

请尝试输入全名。

非常感谢!!

Answer 1

使用 margin-left 会帮助你。检查这个

JS

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

DEMO

注意:由于有箭头，我在宽度上增加了 7 像素。