表单验证不适用于 Bootstrap 验证器答案

【问题标题】：Form validation not working with Bootstrap validator表单验证不适用于 Bootstrap 验证器
【发布时间】：2016-08-08 20:01:04
【问题描述】：

我正在使用 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>

Javascript

$(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'
          }
        }
      }
    }
  });
});

【问题讨论】：

标签： javascript jquery forms twitter-bootstrap bootstrapvalidator

【解决方案1】：

我知道这是一个老问题，但我正在使用这个插件的旧版本 bootstrapValidator，因为它带有我正在使用的主题 SmartAdmin。

首先，这个插件有两个版本。

formvalidation.io（付费版），bootstrapValidator（免费版，直到.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/

【讨论】：