使用Jquery Validation Plugin为我的表单添加实时验证

时间:2017-08-22 15:43:04

标签: javascript jquery jquery-validate

我想使用这个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);

1 个答案:

答案 0 :(得分:2)

默认情况下,它会对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,然后让其他事件发生。