提交表格而不提交表格

Question

令人困惑的头衔，我知道。我会尽力尽力说出来。

---

我有什么

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

---

我想要发生什么

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

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

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

---

目前发生的事情

目前，当我点击最终的“提交”按钮时，浏览器验证会激活（因为表单实际上已提交）。但这已经太晚了，因为表单部分现在全部关闭，用户将无法看到哪些输入需要注意。

Answer 1

您需要添加表单并提交按钮属性：

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

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

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

Answer 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/

Answer 3

尝试

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