水平表单的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>