0

Ajax 呼び出しを行う前に jQuery の検証プラグインを使用してフォームを検証していますが、何らかの理由でフォームを送信するたびにページが更新されます。ここに私の検証関数があります:

//Invite form validation
$("#inviteForm").validate({
//Rules for invite validation
rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
//Messages to print if validation fails
messages: {
            name: "Please provide your friend's name.",
            email: "We cannot contact your friend without a valid email address.",
        },
//What to do when validation succeeds
submitHandler: function(form) {
            //Form is valid, make Ajax call
            $.ajax({
            type: "POST",
            url: '/invite/process',
            data: $("#inviteForm").serialize(),
            datatype: "html",
            success: function(data, textStatus ,XHR) {
                $("#inviteModal").html(data);
                if(data.indexOf("Thank you") >= 0 ){
                    invites -=1;
                    $("#overlay").css("display", "none");
                    $("#inviteModal").fadeOut(5000);
                }
            }
            });
            return false;
        }
});

の中にあります$(document).readyが、他にもいくつかの機能があるため、すべてを投稿しませんでした。そして、これはフォームのコードです:

<!--// MODAL: INVITE //-->
<div id="inviteModal" class="modal" style="display: none">
<script type="text/javascript" src="/includes/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var invites = <?php echo $user->getInvitesLeft(); ?>;
if(invites < 1){

$("#inviteModal").html("You have no invites left. You can get more by increasing your score.");
}
else{
$("#inviteModal").html("<h2>Please enter the specified information for the friend you wish to invite. </h2>"+
   "<form id=\"inviteForm\" >"+
   "<p>Name: <input type=\"text\" name=\"name\"></p>"+
   "<p>Email: <input type=\"text\" name=\"email\"></p>"+
   "<p><input type=\"submit\" name=\"submit\" value=\"Invite\"></p>"+
   "</form>");
}

</script>
</div>

フォームを送信すると、Ajax 呼び出しを実行せずにページが更新され、フォーム データが ?name=bobby&email=williamrump%40aol.com&submit=Invite などの URL に追加されます。Ajax 呼び出しを行わずにページを更新するのはなぜですか? また、それを防ぐにはどうすればよいでしょうか?

4

1 に答える 1

2

バリデーターをアタッチしようとした後、フォームを作成しているようです。これは、これを引き起こす可能性のあるいくつかの理由の 1 つです。

  • document.ready()作成後にバリデーターイベントを添付していることを確認するために、jQuery コードの周り。
  • JavaScript を使用してフォームを作成している場合は、バリデータ イベントを添付する前にコードが実行されていることを確認してください。
  • JavaScript エラーを確認します。JavaScript の残りの部分の実行を停止し、バリデーター イベントをフォームに添付できないようにする場合があります。
  • ,バリデーターに送信されたオプション オブジェクトに余分なものがないか確認します。一部のブラウザー (IE など) では失敗する場合があります。
  • 送信ハンドラーにを追加しconsole.log()て、バリデーターに何かが通過するかどうかを確認してください。

直前のメモ:私の最初の提案のようですが、質問へのコメントにも記載されていましたが、これが問題でした。したがって、この種の問題の将来のチェックリストとして残りを使用できます:)

于 2012-07-05T20:48:35.263 に答える