Question

我曾尝试使用BootstrapValidator，但出于某种原因，除非我删除了JS脚本，否则它不会提交表单。

JS脚本是：

$(document).ready(function() {
    $('#loginForm').bootstrapValidator({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            pass: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    different: {
                        field: 'email',
                        message: 'The password cannot be the same as username'
                    }
                }
            },
        }
    });
});

我的表格：

 <div class="col-sm-4 col-sm-offset-5 col-md-4 col-md-offset-5 main">
 <h1 class="page-header">Please sign in</h1>
      <form id="loginForm" class="form-signin" action="ApplicantLogin.php" method="POST">
        <label for="inputEmail" class="sr-only">e-Mail</label>
        <input type="text" id="inputEmail" class="form-control" placeholder="e-Mail" name="email" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" name="pass" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" name="loginbtn" value="login">Sign in</button>
      </form>

    </div> <!-- /container -->

我已将按钮名称更改为与创建者建议的默认值不同，但仍无法正常工作。有什么想法吗？验证工作正常。

Answer 1

您的表单未提交，因为您没有submit按钮。添加type="submit"即可。

<button type="submit" class="btn btn-lg btn-primary btn-block" name="loginbtn" value="login">Sign in</button>

Answer 2

我已经尝试了您在 localhost 和小提琴中提供的代码，但它确实有效。我试图在这里插入相同的小提琴，控制台显示此错误：

bootstrap验证器不是函数

出于某种原因，似乎没有加载插件。也许这就是你网络上发生的事情。要解决它，您可以链接bootsrap验证器库：

//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css


//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js

如果验证器正在运行，它应该使用您拥有的按钮提交，如果您点击空输入，它应该显示一条消息。

检查控制台日志是否记录了相同的错误
检查jquery是否为correclty linked

This is the link to to the fiddle working

BootstrapValidator不提交表单

2 个答案: