水平表單的Bootstrap驗證

Question

我正在面對我正在使用的Bootstrap驗證器的一個奇怪問題。這裏有一個工作小提琴：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' 
         } 
        } 
       } 
      } 
     }); 
}); 

的問題，我面對的是我只對前三個字段，即專案編號，項目名稱&發佈日期設置驗證。只要我點擊提交按鈕，引導程序錯誤類也適用於相鄰的現場主管。任何想法如何防止這種情況發生？

Answer 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

只有一個錯誤。替換你的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> 

    </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>