表單自動提交

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." 
    }, 

}, 

}); 

提交代碼

 $('.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()，不在自己的外部.on('submit')處理程序。由於該插件已在處理提交事件，因此可以解釋您的不可預知的行爲。

$(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 
     } 
    }); 
}); 

作爲一個側面說明，你不需要的data參數爲您remote規則，因爲這個字段的值已被默認發送。

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