Question

我正在使用非常好的低音验证插件来满足我所有的表单验证需求： http://bassistance.de/jquery-plugins/jquery-plugin-validation/

我遇到的问题：即使用户尚未完成字段，也会立即显示错误消息。因此：在用户输入完成之前，将显示无效的电子邮件。

在文档here中，一种解决方案是将选项onkeyup设置为false，从而导致错误消息仅显示在onblur上。

但是，在我的设置中，我遇到了另外两个问题（上述解决方案无法解决）

提交无效表单后，更正时不会清除错误消息
使用浏览器自动填充功能时，自动填写的字段会被标记为错误。

所以，我最初的问题是：如何在第一次提交之后才进行Bassistance验证，并从那里开始使用默认设置？

这是我的代码：

if($('#contact_form').length) {
    $("#contact_form").validate({
        rules: {
            first_name: {
                required: true
            },
            last_name: {
                required: true
            },
            message: {
                required: true
            },
            telephone: {
                required: true
            },              
            email: {
                required: true,
                email: true
            },
            email_again: {
                required: true,
                email: true,
                equalTo: "#email"
            },
            norobot: {
                required:true,
                minlength:4,
                maxlength:4,
                number:true     
            }
        }
    });
}

请在此处找到完整的JavaScript：http://lad.chocolata.be/js/main.js

以下是将onkeyup设置为false的错误的工作示例： http://lad.chocolata.be/nl/contact

在提交带有一些无效字段的表单后，错误消息在更正时无法清除。

我错过了什么？

Answer 1

引用OP： “所以，简单明了，我的问题是：我怎样才能在第一次提交之后使用Bassistance验证并使用它那里的默认设置是什么？“

警告读者：通常情况下，人们会在DOM上调用.validate() 一次准备初始化表单。以下代码仅在最初按下提交按钮时调用.validate() 一次 ...因此，在第一次按下该按钮之前，将会有无验证时间。

无需多次拨打.validate()，因此我使用了jQuery one() event。

$(document).ready(function() {

    $('#submit').one('click', function() {
        $('#myform').validate({
            // your rules & options
        });
    });

});

工作演示：

http://jsfiddle.net/hSDyP/

Answer 2

我写了一个通用解决方案，以避免在第一次提交之前应用valitation。在包含脚本'jquery.validate.js'之后使用此代码：

(function($){

var _validate = $.fn.validate;

$.fn.validate = function(){
    var result, args = Array.prototype.slice.apply(arguments);
    this.each(function(){
        var $this = $(this),
            lazyValidate = $this.data('lazy-validate');
        // Lazy validation has been initialized: just delegate
        if( lazyValidate === true ){
            result = _validate.apply($this, args);
            return;
        }
        // Init, if not yet
        if( !lazyValidate ){
            // Create Lazy Form 
            lazyValidate = $('<form />')[0];
            $this.data('lazy-validate', lazyValidate);
            // Add One-Time submit handlder
            $this.one('submit.lazy-validate', function(){
                var $this = $(this);
                // Apply validation options now
                _validate.call($this, $(lazyValidate).data('validator').settings);
                // Mark lazy validation has initialized
                $this.data('lazy-validate', true);
                // Test Valid
                return $this.valid();
            });
        }
        // Apply Method to Lazy Form
        result = _validate.apply($(lazyValidate), args);
    });
    return result === undefined ? this : result;        
};  

})(jQuery);

请记住，如果您使用字段的方法，解决方案将无效：rules（），removeAttrs（）。

最后，我认为这个功能应该作为一个简单的validate（）选项包含在valation插件中;但直到那个我仍然会使用这个技巧。

jQuery验证，但仅在初次提交后

2 个答案: