jquery - Bootstrap 3 登录表单和 jQuery 验证插件

Question

我使用 Bootstrap 3 登录表单。但是当我添加 jQuery 验证插件时，它开始跳跃。所以问题是: 1.我输入登录(正确) 2.然后我点击密码输入它，但密码的形式是向下跳的。

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

Answer 1

引用OP的评论:

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

使用 DOM 检查器，当数据输入第一个字段时，我发现事情发生了变化......

正在登录字段下添加一个空的 label 元素...

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

这是插件自动创建的默认标签。

我已经隔离到您的成功回调函数。删除它可以使其在没有“跳转”的情况下工作。

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

我认为您应该使用unhighlight回调函数，而不是success。 unhighlight 回调是对 highlight 回调的补充，因此通常您会像这样一起使用它们...

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

工作演示:http://jsfiddle.net/sTDcF/8/