Bootstrap 3 form using input-group-addon wrapping error labels with Jquery Validate
Solution 1
Solved it another way: http://www.bootply.com/2liEuyqrAb
Had to move the label outside of the input-group. Once doing that, did the expected behavior: form label to left, field to right, and error below field.
Solution 2
The simplest way to solve your problem should be to put your error label with absolute position property in css. In your example here's the result :
.text-danger {
color: #a94442;
position: absolute;
width: 100%;
top: 34px;
line-height: 34px;
left: 0px;
}
Solution 3
I give a solution to this question for another user, its the same problem.
You can find it here. Bootstrap-3: Input Group-Addon STRETCHES with jQuery Validation messages.
Related videos on Youtube
bandrzej
Updated on June 04, 2022Comments
-
bandrzej almost 2 years
Using Bootstrap 3 with a form-horizontal using form-group and input-group tags with Jquery-Validate. When Jquery.Validate runs for errors, it appends a label error control within the input-group.
The issue is that input-group-addon wraps to the next line underneath the form field when the label error control is added by Jquery Validate.
VIEW: http://www.bootply.com/114554
How do I get the label error to stay under the form control and not wrap the input-group-addon to the next line?
Yes, I am aware of this solution - works great, but still doesn't line up the error label for form-horizontal: Bootstrap 3 with jQuery Validation Plugin
-
pgee70 almost 10 yearscould you not just use the suggestion, then add an offset class to error-class? eg errorClass: 'help-block col-md-offset-2',
-
-
Debiprasad over 6 yearsAs the error label is added dynamically by the jQuery Validate plugin, this solution does not help.