ivish ivish - 1 month ago 7
CSS Question

Parsley js breaks the glyphicon alignment on validation error

I have a password input box which contains a glyphicon info image on the right side. I am using parsley.js to validate this input box. On form submit if password validation fails parsley displays the error message beneath the input box as expected but also breaks the alignment of the glyphicon icon and makes it protrude out of the input box. Please find jsfiddle demo here
https://jsfiddle.net/bsbef0qd/2/ . Thanks

<form id="form" data-parsley-validate="">
<div class="row">
<div class="col-xs-4">
<label for="password" class="control-label">Password</label>
<div class="input-group add-on">
<input type="password" name="userFormPassword" id="userFormPassword" value="" class="form-control input-sm" required/>
<span class="input-group-addon">
<a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="Some password instructions">
<i class='glyphicon glyphicon-info-sign'></i>
</a>
</span>
</div>
</div>

<div class="form-group col-xs-4">
<label for="confirm" class="control-label">Confirm Password</label>
<input type="password" name="confirm" value="" class="form-control input-sm" />
</div>
</div>
<button type="submit">Submit</button>
</form>

Answer

You can change the error displaying position..

Add this part to your form tag as a attribute "data-parsley-errors-container="#errorContainer""

<form id="form" data-parsley-validate="" data-parsley-errors-container="#errorContainer">

put this div to where you want the errors to display

<div id="errorContainer"></div>

I have edited your fiddle check the demo

Also Check the Plugin documentation here