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

Question

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. Jquery Validate error wrapping input-group-addon

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

could you not just use the suggestion, then add an offset class to error-class? eg errorClass: 'help-block col-md-offset-2', — pgee70, Jun 28 '14 at 14:35

score 6 · Answer 1 · answered Jul 02 '14 at 03:51

6

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.

answered Jul 02 '14 at 03:51

bandrzej

533
1
5
14

6

As the error label is added dynamically by the jQuery Validate plugin, this solution does not help. – Debiprasad Jul 26 '17 at 10:53

score 5 · Answer 2 · edited Mar 21 '18 at 11:12

5

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;


}

edited Mar 21 '18 at 11:12

Faisal Ashfaq

2,545
4
28
41

answered Apr 16 '14 at 09:05

hillock

59
4

score 2 · Answer 3 · edited May 23 '17 at 11:54

2

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.

edited May 23 '17 at 11:54

Community

1
1

answered May 05 '17 at 17:25

LXhelili

980
5
14

score 0 · Answer 4 · answered Dec 02 '20 at 06:18

Inserting issue with input-group, try the css fix or below code.

  $('.your-form').validate({
    errorPlacement: function ( error, element ) {
      if(element.parent().hasClass('input-group')){
        error.insertAfter( element.parent() );
      }else{
        error.insertAfter( element );
      }
    }
  });

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

4 Answers4

Linked