提交表单而不提交表单[重复]答案

【问题标题】：Submit form without submitting form [duplicate]提交表单而不提交表单[重复]
【发布时间】：2014-06-11 16:24:58
【问题描述】：

标题令人困惑，我知道。我会尽量用这个词来表达。

我有什么

由多个部分组成的大型表单。一次只能看到一个部分，单击“继续”按钮只会使用 javascript 显示表单的下一部分。一些输入包含type='email' 属性。

我想要发生的事情

当用户单击“继续”按钮时，我希望浏览器认为表单正在提交，因此它会检查 type='email' 输入并在输入无效时显示一条消息，就像这样。

但我不希望它在单击继续按钮时提交表单。

编辑：对不起，我忘了补充说我还需要在最后提交表单。所以我不能使用onsubmit='return false' 方法。

目前发生的情况

目前，当我单击最后一个提交按钮时，浏览器验证激活（因为实际上正在提交表单）。但这为时已晚，因为表单部分现在都已关闭，用户将无法看到需要注意的输入。

【问题讨论】：

标题是……嗯，有点奇怪。
这可能有助于stackoverflow.com/questions/7548612/…
触发您的验证onblur of input
如果您要在页面上使用javascript，您不妨将jquery 与jquery validation plugin 结合使用。这将比简单地使用 html 属性来强制验证需要更多的工作，但与编写javascript 来自己验证页面相比，它需要的工作要少得多。此外，它使您可以更好地控制验证发生的时间以及验证发生时会发生什么。
你为什么不让你的继续按钮检查输入的有效性，然后进入下一页。

标签： javascript php jquery html forms

【解决方案1】：

你需要添加表单和提交按钮属性：

<form onSubmit="return false;">
    <input type="email" /> <!-- this will validate! -->
    <button type="submit" onClick="showNextForm();">Continue</button>
</form>

您未显示任何代码，因此我无法适当优化您的代码，但这基本上是您需要对您的 <form> 和 <button> 执行的操作。

表单将验证，但不会提交！

【讨论】：

你忘了等于<form onSubmit="return false;">
为什么投反对票？这是有效的，因为 OP 使用的是 HTML5 元素 type=email。
我讨厌人们投反对票但没有给出任何解释，stackoverflow 是一个改进你的贡献的地方，如果白痴在没有先给出建设性批评的情况下四处投反对票，你就无法做到这一点。
@StaticVoid 不幸的是，这不起作用，因为我仍然需要在最后提交表单。
当你到达最后，你可以.serialize表单并使用jquery发布它。

【解决方案2】：

这是您可以使用的一种方法。

$(function(){
    $('#continue').click(function(e){
        if(!$('#email')[0].checkValidity()){
            $('#form').find(':submit').click();
        }
        else {
            //Open next section
            alert('Opening next section');
        }
    });
});

工作 jsfiddle http://jsfiddle.net/mrodriguezr/5bzNx/3/

【讨论】：

【解决方案3】：

试试

<form onsubmit="return yourJSCheckFunction();">

【讨论】：

您想为您的代码添加解释吗？代码答案没问题，但解释是黄金
这在我的情况下不起作用，因为我仍然需要在最后提交表单。
可以在javascriptlink中使用XMLHttpRequest对象提交