フォームは自動的に送信されます

Question

私は正しく動作するフォームを持っていますが、特定のテスト条件下ではフォームはありません。フォームは、ユーザーの情報を更新する更新フォームです。ページをリフレッシュせず、jQueryの検証プラグインを使用します。私がページに行き、既に取られた何かに私のユーザーネームを変更するとき、それは取っていることを私に通知しません（私はそれを更新するためにフォームをクリックしていない）。フォームからクリックしないで、送信ボタンをクリックするとします。私のユーザー名は既に取られていると言われます。別のユーザー名を選択するまで、私はそれを更新できません。今私がそれを変更しようとすると、私はユーザー名が見つからないときに自動的にフォームを送信します。

実際に更新するためにユーザーがフォームを再度送信する必要があるように修正するにはどうすればよいですか？私はelse文でfalseを返そうとしましたが、解決策を見つけることができません。

検証コード

$(".personal_form").validate({ 
errorElement: 'div', 
rules: { 
    firstName: { 
     required: true, 
     minlength: 2, 
     maxlength: 20 
    }, 

    lastName: { 
     required: true, 
     minlength: 2, 
     maxlength: 20 
    }, 

    bio: { 
     maxlength: 100 
    }, 

    email: { 
     required: true, 
     maxlength: 100, 
     email: true, 
     remote: { 
      url: "usernameChecker.php", 
       type: "post", 
       data: { 
        email: function() { 
        return $("#email").val(); 
        }, 
       }, 
     }, 
    }, 



    username: { 
     required: true, 
     maxlength: 15, 
     alphanumeric: true, 
     remote: { 
      url: "usernameChecker.php", 
       type: "post", 
       data: { 
        username: function() { 
        return $("#username").val(); 
        }, 
       }, 
      }, 
    }, 
}, 

messages: { 

    firstName: { 
     required: "Please enter your first name.", 
     minlength: "Your name should be greater than one letter.", 
     maxlength: "Your name should not exceed 20 characters." 
    }, 

    lastName: { 
     required: "Please enter your last name.", 
     minlength: "Your last name should be greater than one letter.", 
     maxlength: "Your last name should not exceed 20 characters" 
    }, 

    bio: { 
     maxlength: "Your bio should not exceed 100 characters." 
    }, 

    email: { 
     required: "Please enter an email.", 
     maxlength: "Your email should not exceed 100 characters.", 
     email: "Please enter a valid email.", 
     remote: "This email is already taken." 
    }, 

    username: { 
     required: "Please enter a username.", 
     maxlength: "Your username should not exceed 15 characters.", 
     alphanumeric: "Usernames should contain only letters, numbers or underscores.", 
     remote: "This username is taken." 
    }, 

}, 

}); 

提出コード独自の外部.on('submit')ハンドラ内

 $('.personal_form').on('submit', function(e) { 
      e.preventDefault(); 
      e.stopImmediatePropagation(); 
     $(".submit_btn").val("UPDATING..."); 
     $(".submit_btn").css("background-color", "gray"); 
     $(".submit_btn").prop("disabled", true); 

      if ($('.personal_form').valid()) { 

      $.ajax({ 
       url: "usernameChecker.php", 
       type: "POST", 
       data: { 
       username: $('#username').val() 
       }, 
       success: function(data) { 
       if (data == "true") { 
        $.ajax({ 
        url: "usernameChecker.php", 
        type: "POST", 
        data: { 
         email: $('#email').val() 
        }, 
        success: function(data) { 
         if (data == "true") { 

         $.ajax({ 
          type: 'POST', 
          url: '', 
          data: $('.personal_form').serialize(), 
          success: function(data) { 
          success(); 
          submit_failed(); 
          $(".mob_profile_menu a").attr("href", "/profiles/" + $("#username").val()); 
          $(".profile_banner a").attr("href", "/profiles/" + $("#username").val()); 
          $(".linker").attr("href", "/profiles/" + $("#username").val()); 

          } 
         }); 
         } 

         else{ 
          submit_failed(); 
         } 
        } 
        }); 
       } 

       else{ 
        submit_failed(); 
       } 
       } 
      }); 
      } 

      else{ 
      submit_failed(); 
      } 
     }); 


     function submit_failed(){ 
     $(".submit_btn").val("Submit Details"); 
     $(".submit_btn").removeAttr('style'); 
     $(".submit_btn").prop("disabled", false); 
     } 

Answer 1

Your ajax only belongs inside of the submitHandler callback provided within .validate()、ありません。プラグインは既にサブミットイベントを処理しているので、これはあなたの予測できない動作を説明することができます。サイドノートとして

$(document).ready(function() {   // DOM ready 
    $('#yourform').validate({   // initialize plugin 
     // rules, options, etc. 
     submitHandler: function(form) { // fires when form is valid 
      $.ajax({ .... });   // ajax submit 
      return false;    // block default submit 
     } 
    }); 
}); 

このフィールドの値はデフォルトですでに送信されているので、あなたははないはあなたremoteルールのdataパラメータが必要です。

email: { // <- value of this field is sent by remote 
    required: true, 
    maxlength: 100, 
    email: true, 
    remote: { 
     url: "usernameChecker.php", 
     type: "post", 
    }, 
},