Elementor Form checkbox 必填怎麼做？實作教學與常見問題整理

【Elementor 擴充】Checkbox 沒勾也能送出？—— 手動補上「必填」機制，攔截無效表單

—— 補足官方功能的遺憾，在送出前「強制過濾」無效名單

▋ 為什麼你的 Checkbox 設了必填也沒用？

這是一個很多人會忽略的 Elementor 邏輯：Radio（單選）天生支援必填驗證，但 Checkbox（多選）在原生設定下，根本沒有真正的必填機制。

你在面板勾選「Required」往往只是虛晃一招，前台使用者就算一個都不勾，表單照樣能送出。這不是 Bug，而是功能缺失。這篇不談修復，談的是如何「加裝」這個本來就不存在的功能。

▋ 實作教學：手動加裝「止血閥」

既然官方不給，我們就自己用 JavaScript 補上。你要做的是在「送出按鈕」觸發發送動作前，先強制檢查 Checkbox 的勾選狀態。沒勾，就別想過關。

document.addEventListener('DOMContentLoaded', function() {
  const submitBtn = document.querySelector('.elementor-field-type-submit button');
  if (!submitBtn) return;

  submitBtn.addEventListener('click', function(e) {
    // 1. 替換成你的 Checkbox 欄位 ID
    const fieldId = 'field_0d40932'; 
    const checkboxes = document.querySelectorAll(`input[name="form_fields[${fieldId}][]"]`);
    const container = document.querySelector(`.elementor-field-group-${fieldId}`);
    let isChecked = false;

    // 2. 清除舊的錯誤提示
    const oldError = container?.querySelector('.custom-error-msg');
    if (oldError) oldError.remove();

    // 3. 檢查是否有任何一個被勾選
    checkboxes.forEach(cb => { if (cb.checked) isChecked = true; });

    // 4. 若沒勾選，攔截送出動作並報錯
    if (!isChecked && container) {
      e.preventDefault();
      e.stopImmediatePropagation();

      const errorMsg = document.createElement('span');
      errorMsg.className = 'custom-error-msg';
      errorMsg.style.cssText = 'color:red; font-size:12px; display:block; margin-top:5px;';
      errorMsg.textContent = '請至少勾選一個項目'; // 這裡可自訂提示文字
      container.appendChild(errorMsg);
    }
  }, true);
});

▋ 運作邏輯：為什麼要用 Click 攔截？

Elementor 表單的驗證機制有時會跳過瀏覽器原生的 required 判斷。與其求官方更新，不如直接在按鈕層級動手腳。

—— 入口攔截：在封包發送前就擋下，徹底杜絕無效表單名單。
—— 自訂訊息：內建驗證的提示位置很難看，自己寫才能精準掛在欄位下方。

▋ 怎麼驗證功能已上線？

別只測試一次。請打開瀏覽器主控台（F12），在「Network」標籤觀察。如果沒勾選就按送出，應該 完全不會 出現任何連往後端的 Admin-ajax 請求。這才叫真正的攔截。

TIPS：這段功能是「加裝」上去的，如果未來你修改了欄位 ID，記得同步更新這段 JS 代碼，否則驗證會直接失效。