使用 Jquery Validation Plugin 向我的表单添加实时验证答案

【问题标题】：Use Jquery Validation Plugin to add real-time validations to my form使用 Jquery Validation Plugin 向我的表单添加实时验证
【发布时间】：2017-08-22 15:43:04
【问题描述】：

我想使用这个 jquery 插件实时（在输入时）验证我的表单：https://jqueryvalidation.org/rules/?

这是我当前验证功能的一个示例：

(function(ns, window, document, $, undefined) {

var $form;

ns.init= function(){

    $form = $('#formQA');

    $form.validate({
        rules : {
            QResponse : {
                required: function (element) {
                    if ($(element).is(":visible")) {
                        return true;
                    }
                    return false;
                } ,
                maxlength: 255,
                minlength: 2
            }
        }
    })
}
})(home.createNS('home.qa.validation', false), window, document, jQuery);

【问题讨论】：

这里的问题是什么？验证不起作用吗？
不可以，但我希望它是实时的：在我打字时而不是在我移动到另一个输入字段时
你打算怎么做？您打算如何验证未完成的内容？你用什么来测试它？
您可以在输入上绑定一个按键监听器，以在每次按键时触发您的验证功能。
或者你可以覆盖onkeyup选项：onkeyup: function(element) { this.element(element) }

标签： javascript jquery jquery-validate

【解决方案1】：

默认情况下，它会在 keyup 事件上进行验证。但是，验证是“惰性的”，而不是“急切的”，这意味着在第一次单击提交之前不会进行验证。所以你必须调整一些设置。

$form.validate({
    rules : {
        // rules
    },
    onfocusout: function(element) {
        this.element(element); // triggers validation
    },
    onkeyup: function(element, event) {
        this.element(element); // triggers validation
    }
});

您的代码：

required: function (element) {
    if ($(element).is(":visible")) {
        return true;
    }
    return false;
}

您无需测试可见性。默认情况下，插件将动态忽略任何隐藏字段。只需将required 设置为true，然后让其他事情发生。

【讨论】：