表單驗證無法與Bootstrap驗證器一起使用

Question

我正在使用Bootstrap驗證程序來確保提交表單時填寫所有字段。 但是我的驗證器無法正常工作！

這是JSFiddle： http : //jsfiddle.net/3v3011e0/

如果您使用它並提交所有字段為空的表單，然后將其中一個更改為不為空，則所有字段將變為綠色。 這不應該發生。 對於正常工作的字段，它應該只有綠色。 如圖所示，用戶名和密碼為空，但顯示為綠色。 此外，該圖標僅顯示用戶名。 我該如何解決？

的HTML

<form action="#" method="POST" id="myForm">
  <div class="form-group">

    <input id="userField" type="text" name="username" placeholder="Enter user name" class="form-control" />

    <input id="password" type="password" name="password" placeholder="Choose a password" class="form-control" />

    <select id="myPicker" name="num" class="selectpicker form-control">
      <option value="" selected="selected">Select number</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>

  <div class="text-center">
    <button type="submit" class="btn btn-primary">submit</button>
  </div>
</form>

Java腳本

$(document).ready(function() {
  $('#myForm').bootstrapValidator({
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      username: {
        validators: {
          notEmpty: {
            message: 'The username is required and cannot be empty'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: 'The password is required and cannot be empty'
          }
        }
      },
      num: {
        validators: {
          notEmpty: {
            message: 'Number is required and cannot be empty'
          }
        }
      }
    }
  });
});

Answer 1

我知道這是一個老問題，但是我正在使用該插件的舊版本bootstrapValidator，因為它帶有我正在使用的主題SmartAdmin。

首先，此插件有兩個版本。

formvalidation.io（付費版本），bootstrapValidator（免費版本，直到0.5.2？）

無論如何，它們是不同的，文檔是不同的，因此請確保您使用的文檔正確。

該用戶遇到的問題是HTML標記不正確。 使用插件的默認初始化時，每個字段都必須使用類“ .form-group”分隔。

<div class="form-group">
    <input id="userField" type="text" name="username" placeholder="Enter user name" class="form-control" />
</div>
<div class="form-group">
    <input id="password" type="password" name="password" placeholder="Choose a password" class="form-control" />
</div>
<div class="form-group">
    <select id="myPicker" name="num" class="selectpicker form-control">
        <option value="" selected="selected">Select number</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>

http://jsfiddle.net/3v3011e0/7/

如果這不可能，請嘗試模擬復雜表單示例的初始化。 http://bootstrapvalidator.votintsev.ru/examples/complex-form/