AJAX 按钮提交的 HTML5 表单验证

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>";

Answer 1

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

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

  event.preventDefault();

});

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

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
});