Bootstrap: jQuery Validation Plugin causes input group to have wrong height

[matsava]

I am using Prepended text for showing a euro sign before the textbox. Also i am using JQuery Validation Plugin (link to the plugin)

When the error message appears under the field the sign of the euro covers 2 lines (the textbox and the error line)

The code

<div class="col-md-5">
            <div class="input-group">
              <span class="input-group-addon">€</span>
              <input id="worth" name="worth" class="form-control error" placeholder="" type="text" required=""><label for="worth" generated="true" class="error">error message</label>
            </div>

</div>

[josephfusco]

Can you post a working example please with jsbin?

[cvrebert]

Putting a <label> within an .input-group like that is invalid. Please file a bug against the plugin.

[phpdev-expert]

errorPlacement: function ( error, element ) {

        if(element.parent().hasClass('input-group')){
          error.insertAfter( element.parent() );
        }else{
            error.insertAfter( element );
        }

},

Use this