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