水平型のブートストラップ検証

Question

私が使用しているブートストラップ検証ツールで奇妙な問題に直面しています。 https://jsfiddle.net/p6jytvLj/ 注：：出力ウィンドウのサイズを変更して実際のフォームを表示します。私が直面しています

HTMLコード

<form class="form-horizontal" id="main-form" role="form" method="post"> 
    <!-- Text input--> 
    <div class="form-group"> 
     <label class="col-md-2 control-label" for="inputProjectID">Project ID </label> 
     <div class="col-md-3 col-3-input"> 
     <input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID" class="form-control input-md"> 
     </div> 
     <label class="col-md-2 control-label" for="inputProjectName">Project Name </label> 
     <div class="col-md-3 col-3-input"> 
     <input id="inputProjectName" name="inputProjectName" type="text" 
      placeholder="Your Project Name" class="form-control input-md"> 
     </div> 
    </div> 
    <!-- Text input--> 
    <div class="form-group"> 
     <label class="col-md-2 control-label" for="datepicker">Release Date </label> 
     <div class="col-md-3 col-3-input"> 
     <input id="datepicker" name="inputReleaseDate" type="text" 
      placeholder="Select Release Date" class="form-control input-md"> 
     </div> 
     <label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label> 
     <div class="col-md-3 col-3-input"> 
     <input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name" class="form-control input-md"> 
     </div> 
    </div> 
    <!-- Text area --> 
    <div class="form-group"> 
     <label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label> 
     <div class="col-md-9 col-9-input"> 
     <textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc" 
      name="inputProjectDesc" placeholder="Your Project Description"></textarea> 
     </div> 
    </div> 
    <button type="submit" class="btn btn-success" form="main-form" data-toggle="tooltip" 
     title="Click to submit this form" onclick="submitForms()">Submit</button> 
</form> 

JS

$(document).ready(function() { 
     $('#main-form').bootstrapValidator({ 
      framework: 'bootstrap', 
      icon: { 
       valid: 'glyphicon glyphicon-ok', 
       invalid: 'glyphicon glyphicon-remove', 
       validating: 'glyphicon glyphicon-refresh' 
      }, 
      fields: { 
       inputProjectID: { 
        row: 'col-md-3', 
        validators: { 
         notEmpty: { 
          message: 'The Project ID is required' 
         } 
        } 
       }, 
       inputProjectName: { 
        row: 'col-md-3', 
        validators: { 
         notEmpty: { 
          message: 'The Project Name is required' 
         } 
        } 
       }, 
       inputReleaseDate: { 

        validators: { 
         notEmpty: { 
          message: 'Please select a Release Date' 
         } 
        } 
       } 
      } 
     }); 
}); 

問題は、私は最初の3つの分野、すなわちPROJECTID、プロジェクト名&リリース日のためのセットアップの検証を持っています。送信ボタンをクリックするとすぐに、ブートストラップエラークラスが隣のフィールドSupervisorにも適用されます。これを防ぐ方法はありますか？

Answer 1

最後に、複数のフォームグループを1行で処理する方法が見つかりました。それぞれの入力を囲むdivを作成し、それにクラス&を割り当て、次にJSコードのクラス名を記述しました。下記の更新されたHTML & JSコードを参照してください。

HTMLコード

<form class="form-horizontal" id="main-form" role="form" data-toggle="validator" 
    action="blank.html" method="post"> 
    <!-- Text input --> 
    <div class="form-group"> 
     <div class="group"> <!-- Added this div surrounding each input --> 
     <label class="col-md-2 control-label" for="inputProjectID">Project ID </label> 
     <div class="col-md-3 col-3-input"> 
      <input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID" 
       class="form-control input-md"> 
     </div> 
     </div> 
     <div class="group"> 
     <label class="col-md-2 control-label" for="inputProjectName">Project Name </label> 
     <div class="col-md-3 col-3-input"> 
      <input id="inputProjectName" name="inputProjectName" type="text" 
       placeholder="Your Project Name" class="form-control input-md"> 
     </div> 
     </div> 
    </div> 
    <!-- Text input --> 
    <div class="form-group"> 
     <div class="group"> 
     <label class="col-md-2 control-label" for="datepicker">Release Date </label> 
     <div class="col-md-3 col-3-input"> 
      <input id="datepicker" name="inputReleaseDate" type="text" 
       placeholder="Select Release Date" class="form-control input-md"> 
     </div> 
     </div> 
     <div class="group"> 
     <label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label> 
     <div class="col-md-3 col-3-input"> 
      <input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name" 
       class="form-control input-md"> 
     </div> 
     </div> 
    </div> 
    <!-- Text area --> 
    <div class="form-group"> 
     <label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label> 
     <div class="col-md-9 col-9-input"> 
     <textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc" 
      name="inputProjectDesc" placeholder="Your Project Description"></textarea> 
     </div> 
    </div> 
</form> 

JSコード：これは最終的に私のために働いた

$(document).ready(function() { 
      $('#main-form').bootstrapValidator({ 
       framework : 'bootstrap', 
       feedbackIcons : { 
        valid : 'glyphicon glyphicon-ok', 
        invalid : 'glyphicon glyphicon-remove', 
        validating : 'glyphicon glyphicon-refresh' 
       }, 
       fields : { 
        inputProjectID : { 
         group : '.group', 
         validators : { 
          notEmpty : { 
           message : 'The Project ID is required' 
          } 
         } 
        }, 
        inputProjectName : { 
         group : '.group', 
         validators : { 
          notEmpty : { 
           message : 'The Project Name is required' 
          } 
         } 
        }, 
        inputReleaseDate : { 
         group : '.group', 
         validators : { 
          notEmpty : { 
           message : 'Please select a Release Date' 
          }, 
          date : { 
           format : 'MM/DD/YYYY' 
          } 
         } 
        } 
       } 
      }); 
     }); 

!!ここで 更新フィドルです： https://jsfiddle.net/p6jytvLj/7/

Answer 2

1つの間違いのみ。あなたのHTMLを私のものと置き換えてください 間違っています：あなたはsupervisiorのフォームグループクラスを見逃しました。

<form class="form-horizontal" id="main-form" role="form" method="post"> 
    <!-- Text input--> 
    <div class="form-group"> 
    <label class="col-md-2 control-label" for="inputProjectID">Project ID </label> 
    <div class="col-md-3 col-3-input"> 
     <input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID" 
      class="form-control input-md"> 
    </div> 
    <label class="col-md-2 control-label" for="inputProjectName">Project Name </label> 
    <div class="col-md-3 col-3-input"> 
     <input id="inputProjectName" name="inputProjectName" type="text" 
      placeholder="Your Project Name" class="form-control input-md"> 
    </div> 
    </div> 
    <!-- Text input--> 
    <div class="form-group"> 
    <label class="col-md-2 control-label" for="datepicker">Release Date </label> 
    <div class="col-md-3 col-3-input"> 
     <input id="datepicker" name="inputReleaseDate" type="text" 
      placeholder="Select Release Date" class="form-control input-md"> 
    </div> 

    </div> 
    <div class="form-group"> 
    <label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label> 
    <div class="col-md-3 col-3-input"> 
     <input id="inputSupervisor" name="inputSupervisor" type="text" placeholder="Your Supervisor's Name" 
      class="form-control input-md"> 
    </div> 
    </div> 
    <!-- Text area --> 
    <div class="form-group"> 
    <label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label> 
    <div class="col-md-9 col-9-input"> 
     <textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc" 
       name="inputProjectDesc" placeholder="Your Project Description"></textarea> 
    </div> 
    </div> 
    <button type="submit" class="btn btn-success" form="main-form" data-toggle="tooltip" 
      title="Click to submit this form" onclick="submitForms()">Submit</button> 
</form> 

更新フィドル： https://jsfiddle.net/anam8431/psrdzk2m/1/

Answer 3

検証エラー全体form-groupは、検証エラーが印加されているでこれを試してみてください、それはそうです。

フィドル：https://jsfiddle.net/p6jytvLj/2/

control-labelクラスは、この問題を引き起こしていました。私はSupervisorから削除して、今は期待どおりに動作します。

<form class="form-horizontal" id="main-form" role="form" method="post"> 
    <!-- Text input --> 
    <div class="form-group"> 
     <label class="col-md-2 control-label" for="inputProjectID">Project ID </label> 
     <div class="col-md-3 col-3-input"> 
      <input id="inputProjectID" name="inputProjectID" type="text" 
       placeholder="Your Project ID" class="form-control input-md" /> 
     </div> 
     <label class="col-md-2 control-label" for="inputProjectName">Project Name </label> 
     <div class="col-md-3 col-3-input"> 
      <input id="inputProjectName" name="inputProjectName" type="text" 
       placeholder="Your Project Name" class="form-control input-md" /> 
     </div> 
    </div> 
    <!-- Text input --> 
    <div class="form-group"> 
     <label class="col-md-2 control-label" for="datepicker">Release Date </label> 
     <div class="col-md-3 col-3-input"> 
      <input id="datepicker" name="inputReleaseDate" type="text" 
       placeholder="Select Release Date" class="form-control input-md" /> 
     </div> 
     <label class="col-md-2" for="inputSupervisor">Supervisor </label> 
     <div class="col-md-3 col-3-input"> 
      <input id="textinput" name="textinput" type="text" 
       placeholder="Your Supervisor's Name" class="form-control input-md" /> 
     </div> 
    </div> 
    <!-- Text area --> 
    <div class="form-group"> 
     <label class="col-md-2 control-label" for="inputProjectDesc">Project Description 
     </label> 
     <div class="col-md-9 col-9-input"> 
      <textarea style="resize: none;" rows="3" class="form-control" 
       id="inputProjectDesc" name="inputProjectDesc" placeholder="Your Project Description"></textarea> 
     </div> 
    </div> 
    <button type="submit" class="btn btn-success" form="main-form" 
     data-toggle="tooltip" title="Click to submit this form" onclick="submitForms()">Submit 
    </button> 
</form>