請問如何調用 form input 的檢查機制，而不要 submit 跳轉頁面?
目前調用 js 的 submit 方法，瀏覽器會檢查 input 的條件像是 require, min, max 等
但是假如檢查都通過會 submit 跳轉頁面
想要不跳轉 URL 頁面，也能檢查，自動會 scroll 到有問題 input，並跳出瀏覽器自帶的提示詞
這是根據大家的回答，我寫的解決方式:
<!DOCTYPE html>
<html>
<head>
<title>Order Form</title>
</head>
<body>
<form id="orderForm">
<label for="quantity">Quantity (between 1 and 5):</label><br />
<input
type="number"
id="quantity"
name="quantity"
min="1"
max="5"
required
/><br />
<label for="email">Email:</label><br />
<input type="email" id="email" name="email" required /><br />
<input type="submit" value="Submit" />
</form>
<script>
document
.getElementById('orderForm')
.addEventListener('submit', function (event) {
event.preventDefault();
if (!this.checkValidity()) {
event.stopPropagation();
} else {
//alert('Form is valid!');
}
this.reportValidity();
});
</script>
</body>
</html>
已邀請的邦友 {{ invite_list.length }}/5
一般來說，做法會有兩種。
一種是事件阻擋式：
這是直接去使用 submit 的事件中，利用 preventdefault 這個事件特性處理並中斷原本的 submit。
只是這在目前的瀏覽器中，有少部份瀏覽器並不支援。
所以很常還是會發送出去了。
大多數除了使用 preventdefault 之外，最好還是搭配一下 return false
另一種則是按鍵請求式：
也就是說，將按鍵不要定義為 submit 而是 buttion 。
先去跑JS判斷程式，確定完成後才去運行 submit 這個事件。
以JQUERY而簡單例子
if(判斷OK){
$("form").submit()
}else{
alert("資料有問題");
return false;
}
這個方法比較不容易出問題。
最後是現在比較常見的方式。就是 ajax 的模式。
只是這會有點麻煩性，需要自行將 form data 自行組合後傳送。
但也不需要太擔心，無論是JQUERY、VUE或是其它前端框架
都已經有相關表單發送的應用。例 axios 之類的。
iThome鐵人賽
看影片追技術