2

我使用 Bootstrap 3 登录表单。但是当我添加 jQuery Validation Plugin 它开始跳跃。所以问题是： 1. 我输入 Login （正确） 2. 然后我点击 Password 输入它，但 Password 的表单正在跳下。

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在这里

4

1 回答 1

5

引用 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/

于 2013-08-22T17:43:37.417 回答