Twitter Bootstrap Question posted in

Using validate.js with Twitter Bootstrap

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

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    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!


  2. 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

    Login or Signup to reply.
  3. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search