Question

我有点问题。提交表单时，我不想查看有关它的一些内容，如果出现问题，我想阻止它提交，然后在客户端显示错误。一切似乎工作正常，除了表格不断提交。它甚至在提交之前在客户端显示错误一瞬间。

$('#register').on('submit', function (e) {
e.preventDefault();

var username = $("#register-username"),
    name = $("#register-name"),
    email = $("#register-email"),
    password = $("#register-password"),
    confirmPassword = $("#register-confirmPassword");

checkUsername(function (res) {
    if (res) {
        checkEmail(function (res) {
            if (res) {
                this.submit();
            } else {
                clearErrors();
                email.toggleClass('input-error');
            }
        });
    } else {
        clearErrors();
        username.toggleClass('input-error');
    }
});
});



function checkEmail(callback) {
  $.get("/checkEmail/" + $('#register-email').val(), function (data) {
      if ( data == undefined ) {
        callback(true);
      } else {
        callback(false);
      }
  });
}

function checkUsername (callback) {
  $.get("/checkUsername/" + $('#register-username').val(), function (data) {
    if ( data == undefined ) {
        callback(true);
    } else {
        callback(false);
    }
  });
}

function clearErrors () {
  var arr = [
    $("#register-username"),
    $("#register-name"),
    $("#register-email"),
    $("#register-password"),
    $("#register-confirmPassword")
  ];

  arr.forEach(function(el) {
    el.removeClass('input-error');
  });
}

更新现在我只是困惑自己。 checkUsername（）从我的服务器返回undefined，我知道一个事实，但不知怎的，它正在到达调用checkUsername（）的'else'语句。我添加了其余的代码。应该清楚一些混乱。

Answer 1

对preventDefault的调用来自您传递给checkUsername的匿名回调函数。如果异步调用匿名函数，则取消事件为时已晚。

Answer 2

假设问题是由于未显示异步代码，一种有效的方法是使用preventDefault作为jQuery提交处理程序，并在所有验证通过时使用本机提交

类似的东西：

$('#register').on('submit', function (e) {
    e.preventDefault();// prevent jQuery submit

    // after all validation passes
    this.submit();// submit native method won't trigger jQuery handler again

})

Answer 3

您需要从验证中返回false以停止当前的提交事件，然后在成功返回回调时手动发送成功的帖子请求。

由于在从服务器返回验证后回调正在运行，因此您实际上可以影响是否发出请求。其他解决方案涉及尝试更改原始提交事件的方式而不在范围内，因为此时您已经向服务器发送了请求。

$('#register').on('submit', function (e) {

    var username = $("#register-username"),
        name = $("#register-name"),
        email = $("#register-email"),
        password = $("#register-password"),
        confirmPassword = $("#register-confirmPassword");

    checkUsername(function (res) {
        if (res) {
            checkEmail(function (res) {
                if (res) {
                    $.post('{insert form action here}', $(this).serialize());
                } else {
                    clearErrors();
                    email.toggleClass('input-error');
                }
            });
        } else {
            clearErrors();
            username.toggleClass('input-error');
        }
    });

    return false;
});

您必须替换{insert form action here}，而$(this).action可能会在其中起作用，但我不确定。

Answer 4

所以我建立了charlietfl的解决方案并将原生表单分配给变量，然后在anon函数中提交。

$('#register').on('submit', function (e) {
  e.preventDefault()
  var username = $("#register-username"),
    name = $("#register-name"),
    email = $("#register-email"),
    password = $("#register-password"),
    confirmPassword = $("#register-confirmPassword"),
    form = document.getElementById('register');



  $.get("/checkUsername/" + username.val(), function (data) {
     if (data) {
        clearErrors();
        username.toggleClass('input-error');
     } else {
        $.get("/checkEmail/" + email.val(), function (data) {
            if ( data ) {
                clearErrors();
                email.toggleClass('input-error');
            } else {
                form.submit();
            }
        });
     }
  });
});

这很有效。

.preventDefault（）在条件语句中不起作用

4 个答案: