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指出的那样,这种方式应该优先于听取/ element 的onclick事件,因为后者除了正常的表单提交之外还会阻止HTML5验证 - 请参阅小提琴.<button><input type="submit">