Исправить глификон, когда datepicker является обязательным полем

Question

У меня есть форма с дампикером, которая проверяется с помощью ParsleyJS. У датпикера есть глификон рядом с входом, и вход необходим.

Когда пользователь не указал дату, Parsley отображает ошибку. Однако, когда это происходит, промежуток глификона вызывает странное поведение и не соответствует высоте ввода.

Ниже приведен код, который я использую, и демонстрация того, что происходит (проверьте ввод даты).

Что делать, чтобы решить эту проблему?

<form> 
    <div class="row"> 
     <div class='col-sm-6'> 
      <div class="form-group"> 
       <div class='input-group date' id='datetimepicker2'> 
        <input type='text' class="form-control" data-parsley-required="true" /> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-6"> 
      <input type="submit" /> 
     </div> 
    </div> 
</form> 

<script> 
    $(function() { 
     $('#datetimepicker2').datetimepicker(); 
     $('form').parsley(); 
    }); 

</script> 

Answer 1

Ваш вопрос в том, что Петрушка всегда позиционирует <ul> с ошибками в непосредственной близости от элементов с ошибками, но в некоторых особых случаях, таких, как ваша, вы хотите, как ребенок другого элемента (в вашем случае, если вы хотите быть на тот же уровень, что и <div class="input-group date">.

Таким образом, вы можете использовать parsley:field:error событие для достижения этой цели. Попробуйте следующий код, и не забудьте обновить div.date в соответствии с вашей HTML.

$.listen('parsley:field:error', function(parsleyField) { 
    var elem = parsleyField.$element; 

    // Whenever we're dealing with datepickers 
    if (elem.parent('div.date').length > 0) { 
     // Get the parent element of the input 
     var topParent = elem.parent('div.date').parent('div'); 

     // Find the error list and append it to the parent instead of the input 
     topParent.find('ul.parsley-errors-list').each(function() { 
      // move $(this) to the bottom of top parent 
      topParent.append($(this)); 
     }); 
    } 
}); 

Проверить this jsfiddle demo.