表单自动提交

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