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所指出的那样，这种方式应优先于收听onclick / <button>元素的<input type="submit">事件，因为后者会阻止HTML5验证除了正常表格提交 - see 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
});

AJAX按钮提交的HTML5表单验证

2 个答案: