javascript - 将 validate.js 与 Twitter Bootstrap 结合使用

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 中，它是 future 的元素，您需要使用不同的语法来触发:

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

这是一个fiddle demonstrating the effect