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

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

这是一个fiddle demonstrating the effect

Answer 2

前后折腾了大概半个小时，终于解决了。如果您查看我的原始 post，您会发现我的登录按钮类型为 "Button"。出于某种原因，当我将其更改为键入提交时，它起作用了。我不明白为什么，但它有效。

感谢马克的帮助！

Answer 3

首先，插件会自动捕捉type="submit"button或input的点击事件。当 type 属性未设置为 submit.

时没有任何反应

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

$(document).ready(function() {

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

您的 form、LoginForm 的 id 与您附加到 .validate()、#loginModal 的选择器不匹配。

解决所有问题...

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

使用 validate.js 和 Twitter Bootstrap

Using validate.js with Twitter Bootstrap

javascript

jquery

jquery-validate

twitter-bootstrap