javascript - jQuery 验证在按键时不触发

Question

Jquery 验证不会在按键时检查其是否正确。它在焦点离开元素后触发。焦点移出后，验证检查在按键时开始。为什么是这样？这是我的代码

   $('input[name=roleName]').keypress(function () {

        $('form').validate({
            rules: {
                roleName: {
                    required: true,
                    isRoleUsed: true
                }
            },
            messages: {
                roleName: {
                    required: "You have to enter role name"
                }
            }
        });

    });

Answer 1

.validate() 方法永远不会进入按键事件处理程序内部。它只是插件的初始化方法，并且仅进入 DOM 就绪事件处理程序内部。

然后，一旦插件初始化，就会自动捕获 keyup 事件。

$(document).ready(function() {

    $('form').validate({
        rules: {
            roleName: {
                required: true,
                isRoleUsed: true
            }
        },
        messages: {
            roleName: {
                required: "You have to enter role name"
            }
        }
    });

});

演示:http://jsfiddle.net/9hf0pr6a/1/

请注意，默认情况下，验证是“惰性”的，这意味着您可以在评估必需的验证规则之前尝试填写表单。直到第一次单击提交按钮后才会捕获 keyup 事件。

否则，您可以通过覆盖 onkeyup 选项将 keyup 行为更改为“Eager”验证。

$(document).ready(function() {

    $('form').validate({
        onkeyup: function(element) {
            this.element(element);
        },
        rules: {
            roleName: {
                required: true,
                isRoleUsed: true
            }
        },
        messages: {
            roleName: {
                required: "You have to enter role name"
            }
        }
    });

});

演示:http://jsfiddle.net/9hf0pr6a/