我有以下表格。我喜欢新的 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();
});
As Samveen https://stackoverflow.com/users/1353267/samveen指出,这种方式应该优于听onclick
事件的<button>
/<input type="submit">
元素,因为除了普通表单提交之外,后者还会阻止 HTML5 验证 -看小提琴 http://jsfiddle.net/ozrjbLwo/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)