我有以下表格。我喜欢新的 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 验证:
$('form').submit(function(event){
event.preventDefault();
});
作为Samveen指出，这种方式应该优于收听 onclick <button> 事件/<input type="submit">元素，因为除了正常的表单提交之外，后者还会阻止 HTML5 验证 - see fiddle .
关于jquery - AJAX 按钮提交的 HTML5 表单验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20020968/