Question

在我的表单中，我有一个正常的提交按钮，用于验证我的表单，例如，我有

$("#formTest").submit(function (e) {
        alert('test');
});

<form id="formTest">
    <input type="text"/>
    <button>Test</button>
    <input id="submitButton" type="submit" value="Save" />
</form>

但是当我点击“测试”（而不是“保存”按钮）时，会显示警告（）。这是一个简单的例子，但在我的例子中，jQuery在这种情况下验证了我的所有输入。

我如何拥有一个没有提交效果的按钮？

比你

Answer 1

基本上这与验证无关。这只是纯粹的表单提交。为了防止在 Test 按钮上单击提交表单溴，您应该附加一个单击事件处理程序并取消事件的传播。

$("button").click(function(evt){
    evt.preventDefault();
    return false;
});

为什么会发生这种情况？

当您点击测试按钮时，您的表单会被提交，因为默认按钮类型（在您的情况下未提供时）将提交。检查W3C Specification。

这仅仅意味着通过提供type="button"也会改变此提交行为。但这取决于手头的问题（显然不是简化示例中提出的问题）。

Answer 2

你会想要为按钮创建一个处理程序，并在它的事件上放置一个preventDefault（）。

$('button').click(function(e){
    e.preventDefault();
    alert('i clicked!');
});

Answer 3

更改＆lt;按钮＆gt;测试＆lt; /按钮＆gt; 成＆lt; input type =“button”id =“test”＆gt;测试＆lt; / input＆gt;

jQuery：按钮原因验证

3 个答案:

为什么会发生这种情况？