Bootstrap表单验证验证同一个表单组中的所有字段

Question

我在验证表单时遇到问题。

我的HTML是：

<div class="form-group required"> 
    <label for="address1" class="col-xs-12 col-sm-2 col-md-2 control-label">Address</label> 
    <div class="col-xs-12 col-sm-9 col-md-9"> 
     <input type="text" class="form-control" name="address1" id="address1"> 
     <label for="address1" class="control-label control-label-under">Address 1</label> 
    </div> 
</div> 

<div class="form-group required"> 
    <div class="col-xs-12 col-sm-3 col-md-3 col-sm-offset-2 col-md-offset-2"> 
     <input type="text" class="form-control" name="address_city" id="AddressCity"> 
     <label class="control-label control-label-under" for="AddressCity">City</label> 
    </div> 
    <p class="row clearfix visible-xs-block"></p> 
    <div class="col-xs-12 col-sm-3 col-md-3 contact-state"> 
     <input type="text" class="form-control" name="address_state" id="AddressEmirate"> 
     <label class="control-label control-label-under" for="AddressEmirate">Emirate</label> 
    </div> 
    <p class="row clearfix visible-xs-block"></p> 
    <div class="col-xs-12 col-sm-3 col-md-3"> 
     <input type="text" class="form-control" name="address_zip" id="AddressPostal"> 
     <label class="control-label control-label-under" for="AddressPostal"></label> 
    </div> 
</div> 
<hr> 

，输出是

现在的问题是，我需要显示他们在线，所以我把它们里面同样从组和正在验证时创建问题。

我没有任何邮政编码验证。但在验证城市/酋长国验证是否失败时，邮政编码也会以红色显示。我不想要的。

我的问题是如何在图像中显示它们内联显示，但也将它们保持在单独的窗体组中，以便验证不会影响。

Answer 1

这并不难，可以用相同的HTML结构来实现

原因：postal code输入红色突出显示它不是必需的，并没有验证规则集，因为它里面<div class="form-group required">其中address_state和address_city都在里面一样div设置了验证规则，因此如果其中任何一个无效，则会触发错误类.has-error .form-control并突出显示postal code输入。

Fiddle示例其中postal code输入突出显示红色但未设置验证规则。

解决方案：组自定义错误selector e.g row: '.col-xs-12',验证规则内部，它将覆盖缺省错误类.has-error .form-control，只指定具有验证规则集，并有错误内<div class="form-group required">输入。

More Information

Plugin Example

Fiddle自定义选择例如

$(document).ready(function() { 
 
    $('#contactForm') 
 
     .formValidation({ 
 
     framework: 'bootstrap', 
 
     icon: { 
 
      valid: 'glyphicon glyphicon-ok', 
 
      invalid: 'glyphicon glyphicon-remove', 
 
      validating: 'glyphicon glyphicon-refresh' 
 
     }, 
 
     fields: { 
 
      address_city: { 
 
       row: '.col-xs-12', 
 
       validators: { 
 
        notEmpty: { 
 
         message: 'The city is required' 
 
        } 
 
       } 
 
      }, 
 
      address_state: { 
 
       row: '.col-xs-12', 
 
       validators: { 
 
        notEmpty: { 
 
         message: 'The State is required' 
 
        } 
 
       } 
 
      }, 
 
      address1: { 
 
       validators: { 
 
        notEmpty: { 
 
         message: 'The Address One required' 
 
        } 
 
       } 
 
      } 
 
     } 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script> 
 
<form id="contactForm" class="form-horizontal"> 
 
    <div class="form-group required"> 
 
     <label for="address1" class="col-xs-12 col-sm-2 col-md-2 control-label">Address</label> 
 
     <div class="col-xs-12 col-sm-9 col-md-9"> 
 
      <input type="text" class="form-control" name="address1" id="address1"> 
 
     </div> 
 
    </div> 
 
     
 
    <div class="form-group required"> 
 
     <div class="col-xs-12 col-sm-3 col-md-3 col-sm-offset-2 col-md-offset-2"> 
 
      <input type="text" class="form-control" name="address_city" id="AddressCity"> 
 
      <label class="control-label control-label-under" for="address_city">City</label> 
 
     </div> 
 
      
 
     <p class="row clearfix visible-xs-block" form-group required></p> 
 
      
 
     <div class="col-xs-12 col-sm-3 col-md-3 contact-state"> 
 
      <input type="text" class="form-control" name="address_state" id="AddressEmirate"> 
 
      <label class="control-label control-label-under" for="address_state">Emirate</label> 
 
     </div> 
 
      
 
     <p class="row clearfix visible-xs-block " ></p> 
 
      
 
     <div class="col-xs-12 col-sm-3 col-md-3"> 
 
      <input type="text" class="form-control" name="address_zip" id="AddressPostal"> 
 
      <label class="control-label control-label-under"></label> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-xs-9 col-xs-offset-3"> 
 
      <button type="submit" class="btn btn-primary">Submit</button> 
 
     </div> 
 
    </div> 
 
</form>

旁注：你要扩大小提琴观点向左，或运行在上面的代码片段完整页面视图，他们将完全l有问题的快照。