Parsley js нарушава подравняването на глификона при грешка при валидиране

Имам поле за въвеждане на парола, което съдържа изображение с информация за глификон от дясната страна. Използвам parsley.js, за да проверя това поле за въвеждане. При подаване на формуляр, ако проверката на паролата е неуспешна, parsley показва съобщението за грешка под полето за въвеждане, както се очаква, но също така нарушава подравняването на иконата на глификона и я кара да стърчи извън полето за въвеждане. Моля, намерете демонстрация на 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>

validation html css twitter-bootstrap-3 parsley.js
person ivish    schedule 02.02.2016    source източник

Отговори (2)


arrow_upward
5
arrow_downward

Можете да промените позицията на показване на грешка.

Добавете тази част към маркера на вашия формуляр като атрибут „data-parsley-errors-container="#errorContainer"“

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

поставете този div там, където искате да се показват грешките

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

Редактирах вашата цигулка, проверете демото

Също така проверете документацията на приставката тук

person Tharaka Arachchige    schedule 02.02.2016
comment
Нарочно копирам този URL адрес от моя инкогнито режим тук, само за да ви дам +1 - person VHanded; 23.06.2016

arrow_upward
1
arrow_downward

също така можете да използвате 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>
person Siva Anand    schedule 23.10.2016