JavaScript 表單提交：submit() 拼寫錯誤卻仍能跳轉的真相

現象

代碼中寫成 document.myForm.submt()（漏了 i），但點擊圖片按鈕後表單**依然提交跳轉**了，為何？

核心原因

瀏覽器原生表單提交機制與 JS 錯誤容錯：

1. <img onclick="sub()"> 觸發 sub()。
2. sub() 內部 document.myForm.submt() 拋出 TypeError: submt is not a function。
3. **但**該 <img> 在 <form> 內部，且**無 type="button"**，在某些瀏覽器中 <img> 點擊會隱式觸發表單提交（類似 <input type="image">）。
4. JS 錯誤**不阻止**瀏覽器默認行為，表單照常提交。

驗證方法

function sub() {
    try {
        document.myForm.submt(); // 故意寫錯
    } catch (e) {
        console.error("JS 錯誤:", e.message); // 控制台會印出錯誤
    }
    // 此處代碼不再執行，但表單已由瀏覽器原生提交
}

打開 DevTools Console，點擊後必見紅色報錯，證明 JS 拋錯，但網絡面板顯示 Form Data 已發送。

正確寫法與最佳實踐

<form id="myForm" action="/login" method="post">
    <input name="username" required />
    <input name="password" type="password" required />
    <button type="submit">登入</button> <!-- 標準提交按鈕 -->
</form>

<script>
// 現代寫法：綁定 submit 事件，而非 onclick
document.getElementById('myForm').addEventListener('submit', async (e) => {
    e.preventDefault(); // 阻止默認提交
    const formData = new FormData(e.target);
    const resp = await fetch(e.target.action, { method: 'POST', body: formData });
    // 處理響應...
});
</script>

避坑清單

• ❌ 使用 <img onclick="..."> 做提交按鈕（語義不清、無障礙差、隱式提交行為不一致）。
• ❌ 手動拼寫 submit() 且不做異常捕獲。
• ✅ 用 <button type="submit"> + form.addEventListener('submit')。
• ✅ 表單驗證用 HTML5 required, pattern 或 Constraint Validation API。

**結論：JS 報錯不代表功能失效，瀏覽器原生行為可能「兜底」；規範寫法才是穩健之道。**