HTML5表单验证用于AJAX按钮提交

Question

我有一个表单，我喜欢新的HTML5表单验证，希望保留它。但是，当按下按钮时刷新页面（表单提交）的方式不太理想。我希望使用按钮来触发一些AJAX以刷新页面元素，而不是整个页面。然而，当设置type="button"时，HTML5表单验证将不再在按下按钮时触发。如何在不触发刷新/提交页面的情况下使用HTML5表单验证？请注意，我并不关心这个问题的AJAX元素，只关心HTML5验证问题。

echo "<form>";
echo "<td><input id=\"link_add_title\" type=\"text\" class=\"form-control\" placeholder=\"URL Title\"></td>";
echo "<td><input id=\"link_add_url\" type=\"url\" class=\"form-control\" placeholder=\"Your URL\"></td>";
echo "<td><input id=\"link_add_budget\" type=\"number\" step=\"any\" class=\"form-control\" placeholder=\"Budget\"></td>";
echo "<td><button class=\"btn btn-sm btn-success\"><i class=\"fa fa-check\"></i> Add</button></td>";
echo "</form>";

- Amy Neville

---

@adeneo - 我正在使用Chrome浏览器。不知道其他浏览器如何实现HTML5标准，但如果在Chrome上无法正常工作，我会有些困扰 :) - Amy Neville

好的，请尝试在这个fiddle中点击提交，当验证开始时，页面不会重新加载-> http://jsfiddle.net/Qv2c2/1/ - adeneo

我确实不明白，如果您想在表单有效时避免提交表单，只需在表单提交处理程序中使用preventDefault即可。 - adeneo

好的，一切都解决了，谢谢大家一如既往的支持！ - Amy Neville

http://jsfiddle.net/Qv2c2/2/ - adeneo

Answer 1

这种方式可以防止实际提交，但会触发HTML5验证：

$('form').submit(function(event){

  event.preventDefault();

});

正如Samveen所指出的，与监听<button>/<input type="submit">元素的onclick事件相比，这种方法应该更加优先，因为后者会阻止HTML5验证以及正常的表单提交-请参见此处（fiddle）。

- moonwave99

---

可以了，谢谢！显然我会改进选择器，这样它就不会应用于所有表单 :) - Amy Neville

一个小补充：通常的范例是在按钮点击事件上进行表单提交：$('button').click(function(evt){\*AJAX*\});，这需要改为上述的表单提交事件：$('form').submit(function(event){\*AJAX*\});，同时将按钮类型改回 type="submit"。 - Samveen

@Samveen：使用 $(...).click()，您会阻止 HTML5 验证。所以请只监听 submit 事件 : )) - moonwave99

@moonwave99：你所说的正是我昨天发现的（导致我得出这个答案的问题）。所有与我的表单相关的代码都错误地监听$('button').click()，这个不幸的范例是我从谷歌和SE搜索中学到的（请参见其他答案）。因此，我评论指出了让我掉进陷阱的gotcha。 - Samveen

@moonwave99，你能把我评论中相关的部分作为注释添加到你的答案中吗？这会让一个很好的答案变得更好 :) （比如说不要使用$('button').click()，而是使用$('form').submit(...)） - Samveen

Answer 2

使用提交按钮尝试...

html
<input type="submit" class="your-button-class" />

js
$(document).on('click','.your-button-class',function(){
 //your code

 return false;  //this will prevent the page refresh
});

- Achilles

---

这似乎停止了表单的传播，但也停止了HTML5验证。 - Amy Neville

我认为这是一个特定于浏览器的解决方案 :) - Amy Neville