jQuery 验证插件无法识别有效输入

Question

不知道我做错了什么。我正在使用jQuery Validation 插件。这是我的 jQuery 代码：

$('#form-login').validate({
    onsubmit: true,
    onfocusout: false,
    errorClass: 'invalid',
    wrapper: 'li',
    errorLabelContainer: '#login-error-list ul',
    errorContainer: '#login-error-list',
    highlight: function(element, errorClass) {
        $(element).addClass(errorClass);
        $(element.form).find('label[for=' + element.id + ']')
            .addClass(errorClass);
    },
    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
        $(element.form).find('label[for=' + element.id + ']')
            .removeClass(errorClass);
    },
    rules: {
        username: 'required',
        password: 'required'
    },
    messages: {
        username: 'Please enter your username.',
        password: 'Please enter your password.'
    }
});

在编写本文时，我非常严格地遵循 API 文档。但是，无论输入什么输入（无论是无输入还是任何有效输入），它仍然会引发错误，就好像从未输入用户名和/或密码一样。您可以在this login page 上亲自查看。

有人知道问题出在哪里吗？

P.S.：我应该添加生成表单和错误容器的 HTML 代码：

<p>Already have an account with us? Then log in!</p>
<form action="login.php" method="post" id="form-login">
<input type="hidden" name="success_page" value="" />
<div class="group">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" title="Username" maxlength="20" min="6" max="20" />
</div>
<div class="group">
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" title="Password" min="6" />
</div>
<div id="login-error-list" class="group" style="display: none;">
    <p>Errors:</p>
    <ul></ul>
</div>

Answer 1

删除您的自定义消息，您会看到真正的问题是什么：

http://jsfiddle.net/DLcLJ/

您将两个输入都设置为仅接受 >6 的数字。

我假设你想要的是最小长度。将两个 min 属性都替换为 minlength 并删除用户名上的最大值。