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

Answer 2

此外，您可以在输入元素中使用 data-parsley-errors-container="#your-div-id"

<div class="form-group">
  <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Start Time</label>
  <div class="col-md-6 col-sm-6 col-xs-12">
       <div class=" datetimepicker3 input-append timepick">
          <input class="form-control" data-format="hh:mm" placeholder="HH:MM" type="text" name="startTime" data-parsley-errors-container="#startTimeErrorContainer" required="required"  id="startTime" />
          <span class="add-on"><i class="fa fa-clock-o icon-time"></i></span>  
       </div>   
      <div id="startTimeErrorContainer"></div>                                            
  </div>

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

Parsley js breaks the glyphicon alignment on validation error

html

css

validation

parsley.js

twitter-bootstrap-3