水平形式的引导程序验证

Question

我正在使用我使用的bootstrap验证器面临一个奇怪的问题。这是一个工作的小提琴：https：//jsfiddle.net/p6jytvlj/ Note ：调整输出窗口的大小以查看实际表单。

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，Project Name＆amp;）进行了设置验证。发布日期。我单击"提交"按钮后，Bootstrap错误类也适用于相邻的现场主管。有什么想法如何防止这种情况发生？

Answer 1

最终找到了一种处理单行中多个形式组的方法。刚刚创建了一个围绕每个输入的DIV，分配了一个类＆amp;然后在JS代码中提到类名。请参阅更新的HTML＆amp;下面的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

请尝试，似乎在验证错误中，整个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>

Answer 3

只有一个错误。用我的HTML代替您的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/