5

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

我遇到的一个问题：即使用户还没有完成一个字段，错误消息也会立即出现。因此：在用户完成输入之前，会出现无效的电子邮件。

在此处的文档中，一种解决方案是将选项设置onkeyup为false导致错误消息仅出现 onblur。

但是，在我的设置中，我遇到了两个额外的问题（上面的解决方案没有解决）

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

所以，我最初的问题是：我怎样才能让 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这是一个设置为错误的工作示例：http false: //lad.chocolata.be/nl/contact

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

我错过了什么？

4

2 回答 2

4

引用 OP： “所以，简单明了，我的问题是：我怎样才能让 Bassistance 验证仅在第一次提交后才触发，并且从那里开始使用它的默认设置？”

对读者的警告： 通常，人们会在准备好初始化表单的 DOM 上调用.validate() 一次。下面的代码仅在最初按下提交按钮时调用.validate() 一次......因此，在第一次按下该按钮之前不会进行任何验证。

不需要.validate()多次调用，所以我使用了jQueryone()事件。

$(document).ready(function() {

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

});

工作演示：

http://jsfiddle.net/hSDyP/

于 2013-01-19T17:05:07.380 回答
-1

我写了一个通用的解决方案来避免在第一次提交之前应用验证。只需在包含脚本 '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 插件中；但在那之前，我仍然会使用这个技巧。

于 2013-02-05T18:09:44.090 回答