jsp 和 Bootstrap 中的 bootstrapValidator 出现奇怪错误

Question

我正在使用 'bootstrapvalidator' 来验证我的表单（bootstrap 的注册和登录模式）。当我在任何模式中输入正确的数据时说 Login 然后登录按钮（提交登录表单）就像数据一样被禁用不正确。但是当我清除密码字段中的数字并再次输入并尝试提交表单时，它会提交表单。

我不知道为什么会这样，也不知道是什么导致了错误。

我正在使用来自 https://cdnjs.com 所有 cdn 的 cdn，共有 8 个 cdn 链接。

我的表单代码（模态登录）

<div id="login" class="modal fade " role="dialog">
<div class="modal-dialog login-modal">
    <div class="modal-content">
        <form action="logindone.jsp" method="post" class="form-horizontal" role="form">
            <div class="modal-header">
                <a class="close cross" data-dismiss="modal">x</a>
                <h3>Login</h3>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="email-name" class="col-md-2 control-label  glyphicon glyphicon-user"></label>
                    <div class="col-md-10">
                        <input type="email" class="form-control" id="email-name" name="email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="email-pass" class="col-md-2 control-label glyphicon glyphicon-lock"></label>
                    <div class="col-md-10">
                        <input type="password" class="form-control" id="email-pass" name="password">
                    </div>
                </div>
            </div>
            <div class="modal-footer modal-footer-hidden-border">
                <a href="#" class="btn btn-link" data-dismiss="modal">Forgot password ?</a>
                <button type="submit" value="submit" class="btn btn-danger btn-circle-lg glyphicon">Log in</button>
            </div>
        </form>
      </div>
   </div>
</div>

我的bootstrap验证者代码

<script>
$(document).ready(function() {
  var validator = $('#login').bootstrapValidator({
    fields: {
      email: {
        message: "Email is required",
        validators: {
          notEmpty: {
            message: "Please provide an email address"
          },
          stringLength: {
            min: 6,
            max: 35,
            message: "Email must be between 6 and 35 characters long"
          },

          emailAddress: {
            message: "Email address must be valid"
          },
          regexp: {
            regexp: /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: 'Not a valid email address'
          }

        }
      }, //.email
      password: {
        validators: {
          notEmpty: {
            message: "Password is required"
          },
          stringLength: {
            min: 8,
            message: "Password must be 8 characters long"
          },
          different: {
            field: "email",
            message: "Email and Password must be different"
          }
        }
      }
    }
  });
});
</script>

Answer 1

代码没有什么问题，唯一的问题是$('#login')你的目标是模态ID，

var validator = $('#login').bootstrapValidator({ //validation code });

您必须针对 form selector 阅读 How to call the plugin

所以给 form 分配一个 ID，例如 id="loginForm" 不同于模态 ID。

<form action="logindone.jsp" id="loginForm" method="post" class="form-horizontal" role="form">

和bootstrapValidator代码将是

var validator = $('#loginForm').bootstrapValidator({ //validation code });

好好休息

工作Fiddle示例

jsp 和 Bootstrap 中的 bootstrapValidator 出现奇怪错误

weird error in bootstrapValidator in jsp with Bootstrap

jsp

twitter-bootstrap

bootstrapvalidator