0

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

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

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

我的引导验证器代码

<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>
4

1 回答 1

1

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

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

您必须针对form selector阅读如何调用插件

所以分配一个id给form例如id="loginForm"不同的然后模态id。

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

和bootstrapValidator代码将是

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

休息很好

工作小提琴示例

于 2016-03-22T23:26:45.603 回答