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.

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

Mark · Accepted Answer · 2015-05-25 09:20:57Z

0

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

answered May 25, 2015 at 9:20

Mark

6,8731 gold badge35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user4258956 Over a year ago

Should I be validating the form from the #loginModal or from the form's ID?

Mark Over a year ago

jquery validate works on the name attribute, you should validate on the name, not the id, but you can leave it as it is and initiate the validate proccess from the click event from the button

user4258956 Over a year ago

I am still having problems with this. Everything is loaded on the page. I'm even trying to use validate.js on another webpage that has minimal mark-up and doesn't use bootstrap. What am I doing wrong? I can't see any problems at all.

Mark Over a year ago

<form onsubmit="return false;" remove that return false

user4258956 Over a year ago

It was because I had the button as type "button" and not type "submit". the plugin must require buttons to be type "submit" Thanks Mark

user4258956 · Accepted Answer · 2015-05-25 10:05:52Z

0

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!

answered May 25, 2015 at 10:05

user4258956

Comments

Sparky · Accepted Answer · 2015-05-25 16:27:40Z

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/

Collectives™ on Stack Overflow

Using validate.js with Twitter Bootstrap

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related