Using validate.js with Twitter Bootstrap

Question

I am using Twitter Bootstrap v3.3.4 to create a modal login form. I want to use the validate.js plugin for jQuery to validate the form before I send the data via AJAX . However, even with writing minimal script using the plugin, I am not getting any error from the validation.

Please find below the HTML markup along with the validate.js (version 1.13.1) script. Thanks in advance.

$(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>

strong text

Answer 1

because your login modal is not in the DOM yet, its a future element, you need to trigger is on a different syntax:

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

Here is a fiddle demonstrating the effect

Answer 2

After about half an hour of going back and forward, I finally solved it. If you look at my original post, you will see that I had the login button as type "Button". For some reason, when I changed it to type submit and it worked. I don't understand why but it works.

Thanks Mark for your help!

Answer 3

First, the plugin automatically captures the click event of a type="submit" button or input . Nothing happens when the type attribute is not set to submit .

Secondly, you don't need to put .validate() inside of a click handler because the .validate() method is only used to initialize the plugin. Then after initialization, the click event of the submit button is captured automatically . (Nor do you need an inline onsubmit event handler.)

$(document).ready(function() {

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

The id of your form , LoginForm does not match the selector you attached to .validate() , #loginModal .

Fixing all of that...

Working DEMO: http://jsfiddle.net/654o4wgd/