如何防止表单提交？答案

【问题标题】：How to prevent form submit?如何防止表单提交？
【发布时间】：2020-01-16 03:56:59
【问题描述】：

我有一个登录表单和一个验证码字段。我需要一个 javascript 源来检查此验证码输入，然后将发布数据发送到操作，但我的代码似乎是错误的，e.preventDefault 函数不起作用，因为验证码字段 true 或 false 发布数据仍在发送。请帮忙。

这是我的 javascript 函数：

$(document).ready(function () {
$("#signupform").submit(function (event) {        
    var captchacode = $("#captchatexbox").val();
    if (captchacode != "") {
        var url = "/Account/ValidateCaptcha?Code=" + captchacode;
        $.ajax({
            url: url,
            cache: false,
            success: function (data) {
                if (data == 0) {

                    alert("Invalid captcha");
                    event.preventDefault();
                    //Form post data still sent?
                }
            }
        });
    }
    else alert("Captcha not null");
   });
});

【问题讨论】：

您应该将 event.preventDefault() 移动到 var captchacode = ... 之前，因为您正在发出 ajax 请求并且由于您正在等待响应，因此不会调用 preventDefault
你应该把 event.preventDefault();在初始化验证码之前
@BrianPutt 你赢了我 5 秒哈哈
@Raymond，Alex 也比我快 5 秒 :D

标签： javascript jquery

【解决方案1】：

您需要将event.preventDefault(); 向上移动，使其位于ajax 调用之前。

在 else 块中使用 $("#signupform").submit(); 以编程方式提交表单。

$(document).ready(function () {
$("#signupform").submit(function (event) {        
    event.preventDefault();
    var captchacode = $("#captchatexbox").val();
    if (captchacode != "") {
        var url = "/Account/ValidateCaptcha?Code=" + captchacode;
        $.ajax({
            url: url,
            cache: false,
            success: function (data) {
                if (data == 0) {
                    alert("Invalid captcha");
                    //Form post data still sent?
                } else {
                    $("#signupform").submit();
                }
            }
        });
    }
    else alert("Captcha not null");
   });
});

【讨论】：

【解决方案2】：

你需要有表单 event.preventDefault();在发出 ajax 请求之前。

$("#signupform").submit(function (event) { event.preventDefault();

当ajax请求返回时，您可以使用以下方式提交表单：

if (data != 0) { $("#signupform").submit(); }

【讨论】：