Question

我正在使用我正在使用的Bootstrap Validator的一个奇怪的问题。这是一个工作小提琴：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'
                        }
                    }
                }
            }
        });
});

我面临的问题是我只对前三个字段进行了设置验证，即ProjectID，Project Name＆amp;发布日期。单击提交按钮后，引导错误类也会应用于相邻的字段Supervisor。任何想法如何防止这种情况发生？

Answer 1

最后找到了一种在一行中处理多个表单组的方法。刚刚创建了一个围绕每个输入的div，为它分配了一个类＆amp;然后在JS代码中提到了类名。查看更新的HTML＆amp;下面的JS代码。

HTML代码

Firebase

JS代码：

(topic-name)<1000 estimated user

这最终对我有用!! 这是更新的小提琴： 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 错误是：你错过了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/

水平形式的Bootstrap验证

3 个答案: