Question

我使用Twitter Bootstrap v3.3.4创建模态登录表单。我想在通过AJAX发送数据之前使用jQuery的validate.js插件来验证表单。但是，即使使用插件编写最小脚本，我也没有从验证中收到任何错误。

请在下面找到HTML标记以及validate.js（版本1.13.1）脚本。提前谢谢。

$(document).ready(function(){
    $("#loginButton").on("click",function(){
        //alert("logining in....");
        //jQuery Validate Plugin: http://jqueryvalidation.org/ - 24/05/2015
        $("#loginModal").validate({
            rules:{
                username:{
                    required:true,
                    minlength:6
                },
                password:{
                    required:true,
                    minlength:6
                }
            }
        });
    });
});


<div class="modal" id="loginModal" role="dialog" aria-labelledby="loginModalWindowLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="loginModalWindowLabel">Sign In</h4>
            </div>
            <div class="modal-body">
                <form onsubmit="return false;" id="loginForm">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label" for="username">Username</label>
                            <input class="form-control" id="username" name="username">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label" for="password">Password</label>
                            <input class="form-control" id="password" name="password">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <button type="button" id="loginButton" class="bbcModalbutton pull-right">Login</button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <a href="#">Unable to access your account?</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        Don't have an account? <a href="#">Register FREE</a>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>

强文

Answer 1

因为您的登录模式尚未在DOM中，它是未来元素，您需要触发的语法不同：

$(document).on("click", '#loginButton', function(){
 //your code
}

这是fiddle demonstrating the effect

Answer 2

经过大约半个小时的回头路，我终于解决了。如果你查看我原来的帖子，你会看到我的登录按钮是“按钮”类型。出于某种原因，当我将其更改为输入提交并且它有效时。我不明白为什么但它有效。

感谢Mark的帮助！

Answer 3

首先，该插件会自动捕获type="submit" button或input的点击事件。如果type属性未设置为submit，则不会发生任何事情。

其次，您不需要将.validate()放在click处理程序中，因为.validate()方法仅用于 初始化 < / strong>插件。然后在初始化之后，提交按钮的click事件将自动捕获。（您也不需要内联onsubmit事件处理程序。）

$(document).ready(function() { $("#loginModal").validate({ // <-- initialize plugin // rules & options ....

id的{{1}}，form与您附加到LoginForm，.validate()的选择器不匹配。

修复所有这些......

工作演示：http://jsfiddle.net/654o4wgd/

将validate.js与Twitter Bootstrap一起使用

3 个答案: