AJAX 按钮提交的 HTML5 表单验证答案

【问题标题】：HTML5 form validation for AJAX button submitAJAX 按钮提交的 HTML5 表单验证
【发布时间】：2013-11-16 16:41:49
【问题描述】：

我有以下表格。我喜欢新的 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>";

【问题讨论】：

HTML5 验证不会在我的浏览器中重新加载页面？
@adeneo - 我正在使用 chrome。不知道其他浏览器是如何实现 HTML5 标准的，但如果它在 chrome 上不起作用，我有一点问题 :)
你能给我们一个JSFiddle 显示你的表格吗？
好吧，试着在这个小提琴中点击提交，验证开始时没有页面重新加载 -> jsfiddle.net/Qv2c2/1
我肯定不明白，如果您想在表单实际有效时避免表单提交，只需在表单提交处理程序中使用 preventDefault 即可？

标签： jquery html forms

【解决方案1】：

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

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

  event.preventDefault();

});

正如Samveen 指出的那样，这种方式应该比收听<button>/<input type="submit"> 元素的onclick 事件更可取，因为除了正常的表单提交之外，后者还会阻止 HTML5 验证 - @987654322 @。

【讨论】：

这很有效，谢谢！显然我会改进选择器，所以它并不适用于所有表单:)
一个小补充：通常的范例是在按钮点击事件上进行表单提交：$('button').click(function(evt){\*AJAX*\}); 需要更改为上述表单提交事件：$('form').submit(function(event){\*AJAX*\}); 以及更改按钮类型返回type="submit"
@Samveen：与$(...).click()、you prevent HTML5 validation from happening。所以请只听submit :))
@moonwave99：你所说的正是我昨天发现的（导致我得到这个答案的问题）。我所有与表单相关的代码错误地都听$('button').click()，这个不幸的范例是我从谷歌和SE搜索中学到的（见other answer）。因此，我的评论指出了gotcha，这让我有了。
@moonwave99，您会将我评论的相关部分作为您答案的注释吗？这将使一个很好的答案变得更好:)（不使用$('button').click()，而是使用$('form').submit(...)？）

【解决方案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
});

【讨论】：

这似乎停止了表单的传播，但它也停止了 HTML5 验证
我认为这是一个特定于浏览器的解决方案:)