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

我无法添加图片。基本上，zip字段的长度为5个字符。显示错误时：

＆＃34;此字段是必需的＆＃34;

它显示在zip文本字段下方。＆＃34;

第1行：＆＃34;此字段＆＃34;低于这第二行＆＃34;是＆＃34;在第三行以下＆＃34;必需＆＃34;。我希望我能添加一张图片

JS FIDDLE

Policy Search

In debug mode

Answer 1

JS小提琴与图片不一样，但你需要的是为你的代码添加一些css。 col-sm-1宽度应为100％，并为zip输入设置静态宽度，在css文件或html文件上执行。

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

on html

<input  class="text-input form-control" id="zip" type="text" name="Zip" maxlength="5" size="5" style="width:80px;" />

jquery验证错误标签

1 个答案: