.preventDefault（）が条件文で機能していません

Question

私は少し問題があります。フォームが提出されたら、私はそれについていくつかのことを確認するつもりはなく、何か間違っていたら、それが送信されないようにして、クライアント側でエラーを表示したい。フォームが提出し続ける以外はすべて正常に動作しているようです。それは送信する前に分割された秒間、クライアント側でエラーを表示します。

$('#register').on('submit', function (e) { 
e.preventDefault(); 

var username = $("#register-username"), 
    name = $("#register-name"), 
    email = $("#register-email"), 
    password = $("#register-password"), 
    confirmPassword = $("#register-confirmPassword"); 

checkUsername(function (res) { 
    if (res) { 
     checkEmail(function (res) { 
      if (res) { 
       this.submit(); 
      } else { 
       clearErrors(); 
       email.toggleClass('input-error'); 
      } 
     }); 
    } else { 
     clearErrors(); 
     username.toggleClass('input-error'); 
    } 
}); 
}); 



function checkEmail(callback) { 
    $.get("/checkEmail/" + $('#register-email').val(), function (data) { 
     if (data == undefined) { 
     callback(true); 
     } else { 
     callback(false); 
     } 
    }); 
} 

function checkUsername (callback) { 
    $.get("/checkUsername/" + $('#register-username').val(), function (data) { 
    if (data == undefined) { 
     callback(true); 
    } else { 
     callback(false); 
    } 
    }); 
} 

function clearErrors() { 
    var arr = [ 
    $("#register-username"), 
    $("#register-name"), 
    $("#register-email"), 
    $("#register-password"), 
    $("#register-confirmPassword") 
    ]; 

    arr.forEach(function(el) { 
    el.removeClass('input-error'); 
    }); 
} 

更新： は今、私はちょうど自分自身を混乱させています。 checkUsername（）は私のサーバからundefinedを返します。私は事実を知っていますが、何とかcheckUsername（）が呼び出された 'else'ステートメントに到達しています。残りのコードを追加しました。いくつかの混乱をクリアする必要があります。

Answer 1

preventDefaultの呼び出しは、匿名コールバック関数checkUsernameに渡されます。匿名関数が非同期に呼び出された場合、イベントをキャンセルするには遅すぎます。

Answer 2

現在のサブミットイベントを停止するために検証からfalseを戻し、コールバックが正常に返ってから成功した場合にポストリクエストを手動で送信する必要があります。

検証がサーバーから返された後にコールバックが実行されているので、実際に要求が行われたかどうかに影響を与えることができます。他のソリューションは、すでにこの時点でサーバーに要求を送信して以来、もはや有効ではない元の送信イベントがどのように発生するかを変更しようとします。

$('#register').on('submit', function (e) { 

    var username = $("#register-username"), 
     name = $("#register-name"), 
     email = $("#register-email"), 
     password = $("#register-password"), 
     confirmPassword = $("#register-confirmPassword"); 

    checkUsername(function (res) { 
     if (res) { 
      checkEmail(function (res) { 
       if (res) { 
        $.post('{insert form action here}', $(this).serialize()); 
       } else { 
        clearErrors(); 
        email.toggleClass('input-error'); 
       } 
      }); 
     } else { 
      clearErrors(); 
      username.toggleClass('input-error'); 
     } 
    }); 

    return false; 
}); 

あなたは{insert form action here}を置き換えるために、そして$(this).actionはそれの場所で働くかもしれないでしょうが、私はよく分かりません。だから、

$('#register').on('submit', function (e) { 
    e.preventDefault();// prevent jQuery submit 

    // after all validation passes 
    this.submit();// submit native method won't trigger jQuery handler again 

}) 

Answer 3

は、非同期コードに示されていないため、効果的な方法は、すべての検証が

何かのように通過するときに提出するハンドラを提出jQueryのためpreventDefaultを使用し、ネイティブ使用することです私はcharlietflのソリューションから構築し、変数にネイティブフォームを割り当て、それをanon関数の中で送信しました。

$('#register').on('submit', function (e) { 
    e.preventDefault() 
    var username = $("#register-username"), 
    name = $("#register-name"), 
    email = $("#register-email"), 
    password = $("#register-password"), 
    confirmPassword = $("#register-confirmPassword"), 
    form = document.getElementById('register'); 



    $.get("/checkUsername/" + username.val(), function (data) { 
    if (data) { 
     clearErrors(); 
     username.toggleClass('input-error'); 
    } else { 
     $.get("/checkEmail/" + email.val(), function (data) { 
      if (data) { 
       clearErrors(); 
       email.toggleClass('input-error'); 
      } else { 
       form.submit(); 
      } 
     }); 
    } 
    }); 
}); 

これは機能します。

Answer 4

：問題を想定し