метка ошибки проверки jquery

0

У меня есть текстовое поле, определенное ниже. Когда отображается ошибка проверки, она не отображается как горизонтальная. Он ограничивает длину zip-поля. Может ли кто-нибудь сказать мне, как исправить эту проблему? См. Прикрепленные изображения.

<div class="panel panel-primary">
<div class="panel-heading"><h3 class="panel-title">Policy Search</h3></div>
 <div class="panel-body">
  <div class ="form-group">                                         
  <label class="col-sm-2 control-label" >Policy Number</label>      
<div class="col-sm-3">    
 <input  class="text-input form-control" type="text" name="policyNumber" id="policyNumber" />                                           
</div>      
  </div>
  <div class ="form-group">
   <label class="col-sm-2 control-label" >Last Name</label>     
<div class="col-sm-3">    
<input  class="text-input form-control" type="text" name="phLastName" id="phLastName" />                                            
</div>
  </div>
  <div class ="form-group">
   <label for="Zip" class="col-sm-2 control-label"  >Zip</label>        
<div class="col-sm-1">    
<input  class="text-input form-control" id="zip" type="text" name="Zip" maxlength="5" size="5" />                                           
</div>
   </div>       
   <div class="col-sm-2">&nbsp;</div>                           
   <div class="col-sm-2">    
<button type="button" name="search" id="search" class="btn btn-success">Search Policy</button>                                          
</div>                                                                               
   </div> <!--  End of panel Body -->       
  </div><!--  End of panel  -->
 </div> <!-- End of search panel div -->

В режиме отладки код HTML выглядит так:

Я не могу добавить изображение. В основном поле zip имеет длину 5 символов. Когда отображается ошибка:

"Это поле обязательно к заполнению"

Он отображается под полем zip-текста. "

строка 1: "Это поле" ниже этой второй строки "находится" ниже этой третьей строки "Обязательно". Я бы хотел добавить изображение

JS FIDDLE

Изображение 174551

Изображение 174551

  • 0
    Не уверен, почему я не могу добавить PNG файлы
  • 0
    Я думаю, что col-sm-1 имеет небольшую ширину, поместите метку ошибки в этот div. добавить весь HTML-код, а также CSS, будет легче ответить.
Показать ещё 6 комментариев
Теги:
validation

1 ответ

0

Сценарий JS Не показывает то же самое, что и изображение, но вам нужно добавить CSS-код в свой код. col-sm-1 width должна быть 100% и установить статическую ширину на zip-вход, сделать это в файле css или в вашем html файле.

.col-sm-1{ width: 100% !important; }
#zip{ width: 80px;}

по html

<input  class="text-input form-control" id="zip" type="text" name="Zip" maxlength="5" size="5" style="width:80px;" />
Поделиться
  • 0
    Вот обновленная скрипка. Пожалуйста, взгляните. Это не aligining правильно. jsfiddle.net/q6As7/5
  • 0
    Вместо того, чтобы расширять это zip-поле до 80%, есть ли вообще добавление сообщения об ошибке в новой отдельной строке под элементом? как errorPlacement: function (error, element) {var test = $ (element) .closest ('span'). next (). find ('. error_label'). html (error); Оповещение (тест); },
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню