ブートストラップフォームの検証により、同じフォームグループ内のすべてのフィールドが検証されます

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構造で実現することができます

理由：それは必要ありませんし、何の検証ルール設定されていないところ、それは内部address_stateとaddress_cityが同じdiv内にある<div class="form-group required">だからpostal code入力は、赤の強調表示さバリデーションルールが設定されているので、いずれかが無効の場合は、エラークラス.has-error .form-controlがトリガーされ、postal code入力も強調表示されます。

Fiddle例ここでpostal codeはハイライトされていますが、検証ルールは設定されていません。

ソリューション：検証ルールの内部セットのカスタムエラーselector例えば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>

ミニノート：あなたが左にフィドル表示を展開する必要がある、または上記のスニペットを実行します全ページビュー彼らはまさに私になりますIkeのスナップショット