Parsley js在验证错误时打破了glyphicon对齐

Question

我有一个密码输入框,右侧包含一个glyphicon信息图像.我正在使用parsley.js验证此输入框.在表单提交时,如果密码验证失败,则parsley会按预期在输入框下方显示错误消息,但也会中断glyphicon图标的对齐并使其突出显示输入框.请在这里找到jsfiddle demo https://jsfiddle.net/bsbef0qd/2/.谢谢

<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 1

您可以更改错误显示位置..

将此部分添加到表单标记中作为属性" data-parsley-errors-container="#errorContainer""

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

将此div放在您希望显示错误的位置

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

我编辑了你的小提琴检查演示

另外,还要检查插件文件在这里