Question

我使用Bootstrap 3登录表单。但是当我添加jQuery Validation Plugin时，它开始跳转。所以问题是：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的评论：

“所以问题是：1。我输入登录（正确）2。比[原文如此]我点击密码键入它，但密码的形式正在下降。“

使用DOM检查器，我发现在将数据输入第一个字段时会发生一些变化......

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

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

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

我已经隔离了你的success回调函数。删除它使它在没有“跳跃”的情况下工作。

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

我认为您应该使用success回调函数，而不是unhighlight。 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/

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

的 jsFiddle here

1 个答案: