如何阻止表单提交？ [复制]答案

【问题标题】：How do I stop a form from submitting? [duplicate]如何阻止表单提交？ [复制]
【发布时间】：2013-08-28 10:22:45
【问题描述】：

如何阻止表单提交？我对我的表单进行了一些验证，如果输入不正确，那么表单不应该提交...... 在我的 HTML 中，点击提交时我有这个：

<a href="#" onclick="setTimeout(function(){document.getElementById('form_4').submit()}, 1000);" style="position:static" class="btn-more">Vælg</a>

我的脚本是这样的：

$("#form_4 a.btn-more").click(function (e) {

    //Validate required fields
    for (i = 0; i < required.length; i++) {
        var input = $('#' + required[i]);

        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val(emptyerror);
            errornotice.fadeIn(750);
            e.stopPropagation();
            return false;
        } else {
            input.removeClass("needsfilled");
        }
    }
    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($(":input").hasClass("needsfilled")) {
        return false;
    } else {
        errornotice.hide();
        return true;
    }
});

【问题讨论】：

将处理程序添加到setTimeout 并稍后清除超时。

标签： jquery html css

【解决方案1】：

使用：

e.preventDefault();

关闭点击功能之前或开始时

$("#form_4 a.btn-more").click(function(e){  
    e.preventDefault();  
    //rest of the content
}

您还应该按照您的方式更改setTimeout function，它始终会提交表单。改为：

HTML：

<a href="#" style="position:static" class="btn-more">Vælg</a>

脚本：

$("#form_4 a.btn-more").click(function (e) {

    //Validate required fields
    for (i = 0; i < required.length; i++) {
        var input = $('#' + required[i]);

        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val(emptyerror);
            errornotice.fadeIn(750);
            e.stopPropagation();
            return false;
        } else {
            input.removeClass("needsfilled");
        }
    }
    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($(":input").hasClass("needsfilled")) {
        e.preventDefault();  
        return false;
    } else {
        errornotice.hide();
        return true;
    }
});

【讨论】：

【解决方案2】：

onclick="return false";

这将阻止提交。

return false 来自 jQuery 事件处理程序实际上是与同时调用 e.preventDefault 和 e.stopPropagation 相同传递 jQuery.Event 对象。

或

$("#form_4 a.btn-more").click(function (e) {
 return false;
}

【讨论】：

【解决方案3】：

在线上

errornotice.hide();
return true;

删除返回真；并添加行

document.getElementById('form_4').submit();

或

$(".form4").submit();

并从链接标签中删除 onlick 功能

<a href="#"  style="position:static" class="btn-more">Vælg</a>

【讨论】：

【解决方案4】：

切勿在 HTML 内联中使用 javascript 函数。将你所有的 JS 放在一个 js 文件中。

然后，像这样使用你的 if

 if ($(":input").hasClass("needsfilled")) 
    {
        return false;
    } 
    else 
    {
        errornotice.hide();
        $("#form_4").submit()
    }

一切正常后，只需调用表单提交即可。

【讨论】：

【解决方案5】：

$(".form4").on("submit", function () {
});

如果返回false，则不提交

【讨论】：

我不是反对者，但你真的应该详细说明答案。