带有Bootstrap的jsp中的bootstrapValidator出现奇怪的错误

Question

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

我不知道为什么会发生这种情况以及导致错误的原因。

我正在使用来自https://cdnjs.com 的 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>

我的引导验证器代码

<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 示例