HTML必填欄位被跳過：submit()與requestSubmit()送出表單的差別

聯絡表單的信箱明明設了 required，使用者按原本的送出按鈕也會看到提示；換成JavaScript控制的按鈕後，空白資料卻直接送走。先找程式是不是呼叫了 form.submit()。這個方法會略過瀏覽器的欄位驗證，也不會觸發表單的 submit 事件。

如果你要的是「由程式發起一次正常送出」，通常應使用 form.requestSubmit()。它會走驗證與submit事件流程，但仍要核對表單是否設了略過驗證的屬性，以及事件處理器是否取消送出。

兩個方法，差在送出前經過哪些步驟

submit() 直接啟動表單送出，不經互動式欄位驗證，也不派發submit事件。把必填檢查、送出前確認或資料整理全放在submit監聽器裡，這些程式也會被繞過。

requestSubmit() 則會先做正常的限制驗證。若必填信箱空白或格式不符，瀏覽器阻止送出；驗證通過後才觸發submit事件。事件裡若呼叫 event.preventDefault()，正常的表單導向仍會被取消，例如改由你自己的非同步程式處理。

所以「看見submit事件」與「伺服器收到並接受資料」是兩件事。後端仍要檢查欄位、權限及請求是否合法，不能依賴瀏覽器的required保護。

先看表單與指定的送出按鈕

下面是詢問表單的最小結構。信箱欄位有name、type與required；送出按鈕則帶有 intent=inquiry，供後端辨識這次操作。請把action換成自己測試站的接收路徑，別直接拿客戶表單測空白送出。

<form id="inquiry" action="/inquiry" method="post">
  <label>信箱
    <input name="email" type="email" required>
  </label>
  <button id="send" type="submit"
          name="intent" value="inquiry">送出詢問</button>
</form>

程式若要沿用這顆按鈕的送出行為，先取得表單與按鈕，再傳給requestSubmit。這段應放在元素已建立後執行，例如載入於頁尾或使用defer的腳本。

const form = document.querySelector('#inquiry');
const send = document.querySelector('#send');

form.requestSubmit(send);

傳入的必須是這份表單所屬的submit按鈕；一般 type="button" 按鈕不能當這個參數。指定send後，這顆按鈕的name/value會參與送出，submit事件的 event.submitter 也能識別它；按鈕上的formaction或formmethod等覆寫設定同樣需要核對。

空白、合法值與按鈕參數，分三次比較

在自己的練習頁加一個submit監聽器，先只記錄事件，不取消正常送出。開著瀏覽器開發者工具的Console與Network，再做以下比較；示範信箱使用保留測試網域 [email protected]。

form.addEventListener('submit', (event) => {
  console.log('submit事件', event.submitter);
});

第一次，保持信箱空白，呼叫requestSubmit(send)。 應看見欄位提示，沒有submit事件，也沒有這次正常表單請求。若空白仍送出，先查form上的novalidate與按鈕上的formnovalidate，不要只看required是否存在。

第二次，仍保持空白，呼叫submit()。 在這個沒有其他攔截的普通表單裡，瀏覽器會送出空信箱，submit監聽器不會執行。這正是兩個方法的行為差別；不要拿正式表單做這一步。

第三次，填入合法信箱，呼叫requestSubmit(send)。 此時會經過submit事件，submitter指向send，請求包含按鈕的intent值。接著比較不帶參數的 requestSubmit()：它仍會驗證及觸發submit事件，但不會自動挑選那顆send按鈕，該按鈕的name/value也不會因此加入。

改過方法還是不對，查這三個位置

先檢查是否在form上放了 novalidate，或指定按鈕帶著 formnovalidate。這些屬性會影響正常驗證流程，改成requestSubmit也不代表強制把它們取消。

再找submit事件內有沒有 preventDefault()。如果有，檢查後續程式是否真的發出請求、失敗時有沒有恢復按鈕；不要因為沒有頁面導向，就判定requestSubmit無效。

最後核對欄位命名。把某個控制項的name或id設為 submit，可能遮住表單的submit方法，呼叫時出現「submit is not a function」。避免使用會碰到表單API的欄位名，先改成email、message等有實際意義的名稱。

若你的問題是「按鈕放進form就意外送出」，先看 HTML按鈕type的設定；本篇處理的是程式主動送出時的驗證流程，兩個入口要分開查。

參考資料