Bootstrap 3 Signin form and jQuery validation plugin

Question

I use Bootstrap 3 Signin form. But when I add jQuery Validation Plugin it starts to jump. So the problem is: 1. I type Login (correct) 2. Than I click Password to type it, but Password's form is jumping down.

jQuery.validator.addMethod("lettersonly", function (value, element) {
    return this.optional(element) || /^[a-z0-9_-]+$/i.test(value);
}, "Please use only a-z0-9_-");
$('#form-signin').validate({
    rules: {
        login: {
            minlength: 3,
            maxlength: 15,
            required: true,
            lettersonly: true
        },
        password: {
            minlength: 3,
            maxlength: 15,
            required: true,
            lettersonly: true
        },
    },
    highlight: function (element) {
        $(element).closest('.control-group').addClass('has-error');
    },
    success: function (element) {
        element.closest('.control-group').removeClass('has-error');
    }
});

jsFiddle here

Solution

Quote OP's comment:

"So the problem is: 1. I type Login (correct) 2. Than [sic] I click Password to type it, but Password's form is jumping down."

Using the DOM inspector, I see one thing changing when data is entered into the first field...

An empty label element is being added under the login field...

<label for="login" class="error"></label>

This is the default label that is automatically created by the plugin.

I've isolated down to your success callback function. Removing it makes it work without the "jump".

http://jsfiddle.net/sTDcF/7/

Instead of success, I think you should use the unhighlight callback function. The unhighlight callback is the compliment to the highlight callback, so typically you would use them together like this...

highlight: function (element) {
    $(element).closest('.control-group').addClass('has-error');
},
unhighlight: function (element) {
    $(element).closest('.control-group').removeClass('has-error');
}

Working DEMO: http://jsfiddle.net/sTDcF/8/