Bootstrap 3 form using input-group-addon wrapping error labels with Jquery Validate

jquery, jquery-validate, twitter-bootstrap-3

Solution

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.

Problem

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

Original source

Related problems