0

多くの種類のフィールド (日付、数字、テキスト、チェックボックス、ラジオなど) を持つかなり巨大なフォームがあります。

フォームから必要な重要な動作の 1 つは、ぼかしでフォーム フィールドを個別に保存できるようにすることです...もちろん、ぼかしで各フィールドを検証する必要があります。有効なフィールドの場合は、「saveField()」を呼び出します。 " 関数。

当然、フォームの検証を次のように初期化します。

$.validate({
        form: '#form-1',
        modules: 'location, logic, html5, security',
        onModulesLoaded: function() {
            $('input.hasCountry').suggestCountry();
        },
    });

後で、各フォームフィールドの「検証」イベントにイベントリスナーを追加します(フォームバリデーターがすでに処理しているため、「ぼかし」イベントリスナーは追加していません...以下は on("validation ") 方法:

$('input:not([type=radio]),textarea')
        .on('validation', function(evt, valid) {
            var error_div = $(this).parents(".parent-input").find('.custom-error');

            if (!valid) {
                var error_message = evt.target.dataset.validationErrorMsg;
                if (!error_message) {
                    error_message = "Please provide a valid input";
                }
                error_div.html(error_message);
            } else {
                error_div.html("");

                                // saveField();
                console.log("I CALL THE SAVE FUNCTION!");
            }
        })
        .on('beforeValidation', function(value, lang, config) {
            var error_div = $(this).parents(".parent-input").find('.custom-error');
            error_div.html("");
        });

ここが変です! 何かを入力してフォーカスアウトすると: - console.log("I CALL SAVE...."); トリガーされます...一度!(これは予想されます)しかし、もう一度焦点を合わせてからぼやけてみると、console.log()が2回発生します=> on( "validation")が2回トリガーされていることを意味します。

JSFiddle リンク: https://jsfiddle.net/tg3h16ec/4/ ブラウザーのコンソールを開き、何かを入力してフォーカスを合わせることで、上記の手順に従います。次に、何かを入力して、再び焦点を合わせます。console.log() のカウントが最初は 1 で、その後毎回 2 ずつ増加していることに気付くでしょう。

以下の回答の1つが追加を提案したため、1を更新します

evt.stopImmediatePropagation();

問題を弱めましたが、解決しませんでした。この問題をさらに詳しく説明するために、JSFiddle を更新してラジオ ボタンを追加しました: https://jsfiddle.net/zwadhp3s/

4

1 に答える 1