jQuery驗證錯誤標簽

Question

我有一個定義如下的文本字段。 顯示驗證錯誤時，它不會顯示為水平。 它限制了郵政編碼字段的長度。 有人可以告訴我如何解決該問題嗎？ 請參閱所附圖像。

<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代碼如下所示：

我無法添加圖像。 郵政編碼字段的長度基本上是5個字符。 顯示錯誤時：

“這是必填欄”

它顯示在zip文本字段下方。”

第1行：第二行下方的“此字段”是第三行下方的“必填”。 我希望我可以添加圖片

JS菲德爾

Answer 1

JS小提琴與圖片的顯示不同，但是您需要在代碼中添加一些CSS。 col-sm-1寬度應為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;" />