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有問題的快照。