HTML 表單 onsubmit 不觸發的常見原因：按鈕類型應為 submit

問題現象

表單定義 <form onsubmit="return validate()">，點擊按鈕 validate() 不執行，表單直接提交或無反應。

根因

<button> 預設 type="submit"，但若明確寫 <button type="button"> 或 <input type="button">，點擊**不會觸發表單提交**，自然也不會執行 onsubmit。

修正方式

1. 改為 submit 類型：

   <button type="submit">提交</button>
   <!-- 或 -->
   <input type="submit" value="提交" />

2. 保留 type="button" 時手動觸發：

   <button type="button" onclick="if(validate()) this.form.submit()">提交</button>

完整範例

<form id="myForm" action="/submit" method="post" onsubmit="return validateForm(this)">
  <input type="text" name="username" required />
  <button type="submit">送出</button>
</form>

<script>
function validateForm(form) {
  if (!form.username.value.trim()) {
    alert("請輸入用戶名");
    form.username.focus();
    return false; // 阻止提交
  }
  return true; // 允許提交
}
</script>

其他常見干擾

• 表單巢狀（HTML 禁止 <form> 巢狀），導致瀏覽器自動閉合外層 form。
• JavaScript 錯誤中斷執行（打開 Console 查看紅字錯誤）。
• validateForm 回傳 undefined 視同 true，務必顯式 return false 阻止。

總結

檢查按鈕 type 屬性是 submit，或手動呼叫 form.submit()，即可恢復 onsubmit 機制。