Question

我有一个密码输入框，右侧包含一个glyphicon信息图片。我正在使用parsley.js验证此输入框。在表单提交时，如果密码验证失败，则parsley会按预期在输入框下方显示错误消息，但也会中断glyphicon图标的对齐并使其突出显示输入框。请在这里找到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>

我已经编辑了你的小提琴检查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在验证错误时打破了glyphicon对齐

2 个答案: