5

私はすべてのフォーム検証のニーズに非常に優れたベーシスタンス検証プラグインを使用しています：http： //bassistance.de/jquery-plugins/jquery-plugin-validation/

私が遭遇した問題：ユーザーがフィールドの入力を完了していなくても、エラーメッセージが即座に表示されます。そのため、ユーザーが入力を完了するまで、無効な電子メールが表示されます。

ここのドキュメントでは、1つの解決策は、エラーメッセージがblurにのみ表示されるようにするオプションを設定onkeyupすることです。false

ただし、私のセットアップでは、2つの追加の問題が発生します（上記の解決策では解決されません）

  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() 1回呼び出します。以下のコードは、送信ボタンが最初に押されたときに.validate() 1回だけ呼び出されます...したがって、そのボタンが最初に押されるまで、検証は行われません。

.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 に答える