多くの種類のフィールド (日付、数字、テキスト、チェックボックス、ラジオなど) を持つかなり巨大なフォームがあります。
フォームから必要な重要な動作の 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/