Bootstrap-3: Input Group-Addon STRETCHES with jQuery Validation messages

Question

I'm using Twitter Bootstrap 3 with jQuery Validate plugin, but for some reason when the validation error message pops up it STRETCHES my Input Group-Addon box and the icon.

NORMAL [NO VALIDATION]

WITH VALIDATION

Here's my Fiddle in case you want to solve the problem: My Fiddle

I've tried multiple solutions on the web such as

GitHub Issue of Input Addon and Input Addon issue on Stack Overflow

But I can't seem to fix the problem, no matter what I try.

Please let me know what do I have to do to prevent the INPUT GROUP-ADDON from stretching when the validation errors appear. Thank you!

My main code is provided below:

jQuery

$('.login-form').validate ({
        // validation rules for registration form
    errorClass: "error-class",
    validClass: "valid-class",  
    onError : function(){
        $('.input-group.error-class').find('.help-block.form-error').each(function() {
          $(this).closest('.form-group').addClass('error-class').append($(this));
        });
    },

        rules: {
            username: {
                required: true,
                minlength: 3,
                maxlength: 40
            },

          password: {
                required: true,
                minlength: 7,
                maxlength: 20
            }
            },

        messages: {
            username: {
                required: "Please enter your username or email address",
                minlength: "Usernames can't be shorter than three characters",
                maxlength: "Usernames or emails must be shorter than forty characters."
            },
                       password: {
                required: "Please enter your password",
                minlength: "Passwords can't be shorter than seven characters",
                maxlength: "Passwords must be shorter than forty characters."
            },

                highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }    
        },

  submitHandler: function() {  
            $('#noenter').show();   

        }  
    });

HTML

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <form class="login-form" action="login" method="post" action="../PHP/ValidateForm.php">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" style="color:red;" id="myModalLabel">TITLE</h4>
        </div>
        <div class="modal-body">
          <!-- Text input-->
          <div class="form-group">

            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-2x fa-user"></i></span>
              <input required id="username" name="username" placeholder="Username or Email" class="inputfield form-control" type="text">


            </div>
          </div>

          <!-- Text input-->
          <div class="form-group">

            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-2x fa-lock"></i></span>
              <input required id="password" name="password" placeholder="Password" class="form-control" type="password">


            </div>
          </div>
          <div class="error">

          </div>
          <input title="Log In" name="submit" value="Log In" type="submit" class="loginbtn btn btn-lg btn-block">
        </div>

        <p class="text-muted"><strong>Need an account? <a href="#">Join </a></strong>

        </p>


      </div>
    </div>
  </form>
</div>

CSS

.form-control {
  color: #000 !important;
}

form label.error-class {
  font: 15px Tahoma, sans-serif;
  color: #ED7476;
  margin-left: 5px;
  position: relative;
}

form input.error-class,
form input.error-class:hover,
form input.error:focus,
form select.error-class,
form textarea.error-class {
  background: #FFEDED;
}

.error-class {
  color: red;
  z-index: 0;
  position: relative;
  display: inline-block;
}

.valid-class {
  color: black;
}

LXhelili · Accepted Answer · 2017-05-04T18:55:01.647

I made few changes to your jQuery and Css files and it works now.

jQuery file changes.

$('.login-form').validate ({

        // validation rules for registration form
    errorClass: "error-class",
    validClass: "valid-class",
    errorElement: 'div',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
    onError : function(){
        $('.input-group.error-class').find('.help-block.form-error').each(function() {
          $(this).closest('.form-group').addClass('error-class').append($(this));
        });
    },

        rules: {
            username: {
                required: true,
                minlength: 3,
                maxlength: 40
            },

          password: {
                required: true,
                minlength: 7,
                maxlength: 20
            }
            },

        messages: {
            username: {
                required: "Please enter your username or email address",
                minlength: "Usernames can't be shorter than three characters",
                maxlength: "Usernames or emails must be shorter than forty characters."
            },
                       password: {
                required: "Please enter your password",
                minlength: "Passwords can't be shorter than seven characters",
                maxlength: "Passwords must be shorter than forty characters."
            },

                highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }    
        },

  submitHandler: function() {  
            $('#noenter').show();   

        }

    });

Css changes.

.error-class {
    color:red;  z-index:0; position:relative; display:block; text-align: left; }

Thank you so much! (^_^) I didn't think about adding an "IF" statement on error placement. — ChosenJuan, May 04 '17 at 20:21

Jonathan Menichetti Riquelme · Answer 2 · 2018-01-02T15:40:09.663

6

This works for me using text fields in bootstrap 3 (includes the use of input-group or not)

I simply search for the parent class .form-group and then insert the error span at the end using append.

$('#form-enroll').validate({
    ...
    errorPlacement: function(error, element) {
        $(element).parents('.form-group').append(error)
    },
})

Look at my screenshot with the view and the console.

edited Jan 02 '18 at 15:40

answered Jan 02 '18 at 15:29

Jonathan Menichetti Riquelme

81
1
2

your codes need to improve. I have added a new solution for that. – Sunil Acharya Nov 09 '19 at 12:10

score 2 · Answer 3 · answered Jul 05 '20 at 12:52

If you don't want to mess with java script then put below code

      <div class="form-group">

        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-2x fa-user"></i></span>
          <input required id="username" name="username" placeholder="Username or 
    Email" class="inputfield form-control" type="text">
        </div>
      <label id="username-error" class="error" for="username" style="display: none;"></label>
      </div>

score 0 · Answer 4 · answered May 04 '17 at 16:44

0

Try moving your icon outside the span:

<div class="input-group">
  <i class="fa fa-2x fa-user"></i>
  <span class="input-group-addon"></span>
   <input required id="username" name="username" placeholder="Username or Email"          class="inputfield form-control"  type="text">
</div>

answered May 04 '17 at 16:44

jkettler

19
3

That makes the icon disappear and the input-group-addon still stretches: i.is.cc/16X74yUY.jpg – ChosenJuan May 04 '17 at 16:50

score 0 · Answer 5 · answered Nov 09 '19 at 12:16

I'm facing the same issue earlier and implemented the code below...

 <script type="text/javascript">
         errorPlacement: function (error, element) {
            if (element.parent().hasClass('input-group')) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }</script>

Check the screenshot ow working example

Bootstrap-3: Input Group-Addon STRETCHES with jQuery Validation messages

5 Answers5

Linked