html - Parsley js 在验证错误时打破了字形对齐

Question

我有一个密码输入框，右侧包含一个字形信息图像。我正在使用 parsley.js 来验证这个输入框。在提交表单时，如果密码验证失败，欧芹会按预期在输入框下方显示错误消息，但也会破坏字形图标的对齐方式并使其突出输入框。请在此处找到 jsfiddle 演示 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>

我已经编辑了你的 fiddle 检查 demo

另请查看插件文档 here