表单自动提交

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()，不在您自己的外部Open Travel处理程序中。由于插件已经处理了提交事件，这可以解释您不可预测的行为。

.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