Correct Position for Variable Error Label - Bootstrap / Jquery

Question

I have a FORM with some Errors Labels in front of each input - at right.

I can control the correct position of each error using this:

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

Then I can put the label exactly 2-3 pixels in front of each input.

But

THE PROBLEM:

some inputs had 2 or 3 different errors message.
each label has a different width (because some messages are short than others)

I can control each width with:

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

Min/Max width + white-space(nowrap).

When I put the label "Right -100px" for ERROR1 - the message was show OK - 2-3 pixles outside the input.

when the message was changed to ERROR2 (biggest message with larger label) - the label was show INSIDE THE INPUT.

if the message was short, the label was show 10-12 pixels outside the input.

It happens because the label grow-up to the left - and not to the right..

How can I choose the correct direction for the label grow-up?

example:

put a point in the middle of the screen > today, the max-width goes from center to right.

how can I go from center to left?

Float?

Here is the https://jsfiddle.net/4v2br346/ (I think it's the better way to understand the problem.. :D )

Please, try the FULL NAME input.

tks a lot!!

J Santosh J Santosh · Accepted Answer · 2015-09-10T10:02:08

Using margin-left will help you . check this

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

Note : I added 7 px to width because of arrow.

Correct Position for Variable Error Label - Bootstrap / Jquery

1 Answers