javascript 表单返回但无法正常工作

Question

 function validateForm() {
    if ($('#date').val() == "") {
        $('#date').css("border","1px solid #FF0000");
        $('#date').focus();
        return false;
    }
    else if ($('#time').val() == "") {
        $('#time').css("border","1px solid #FF0000");
        $('#time').focus();
        return false
    }
    else if ($('#date').val() != "" && $('#time').val() != "") {
        var send = $.post("appointment.php",{
            package     : $('#package').val(),
            first_name  : $('#first_name').val(),
            last_name   : $('#last_name').val(),
            tel         : $('#tel').val(),
            email       : $('#email').val(),
            date        : $('#date').val(),
            time        : $('#time').val(),
        });

        send.success(function (result) {
            if (result == 'TRUE') {
                return true;
            }
            else if (result == 'FALSE') {
                return false;
            }
        });

        send.error(function () {
            alert("ajax error");
            return false;
        });

    }
    else {
        return true;
    }

}

<form name="step2" id="step2" action="./step3.php" onSubmit="return validateForm();" method="post">
...
</form>

即使一切都返回 false；仍然继续step3.php页面。我尝试了很多次，结果都是一样。

我的appointment.php只返回echo“TRUE”或“FALSE”。

知道我的编码出了什么问题吗？

谢谢。

Answer 1

此问题是因为 validateForm 在返回之前没有等待异步调用 ($.post) 完成。

实现您正在寻找的目标的一种方法是始终返回 false。然后成功后，手动提交，这不会调用 onSubmit 函数。

function validateForm() {

  if ($('#date').val() == "") {
    $('#date').css("border", "1px solid #FF0000");
    $('#date').focus();

  } else if ($('#time').val() == "") {
    $('#time').css("border", "1px solid #FF0000");
    $('#time').focus();

  } else {

    var send = $.post("appointment.php", {
      package: $('#package').val(),
      first_name: $('#first_name').val(),
      last_name: $('#last_name').val(),
      tel: $('#tel').val(),
      email: $('#email').val(),
      date: $('#date').val(),
      time: $('#time').val(),
    });

    send.success(function(result) {

      if (result == 'TRUE') {
        $('#step2').get(0).submit();
      }

    });

  }

  return false;
}