Elementor 自訂表單驗證提示：修改特定欄位的警告文字

解決 Elementor 表單提示文字不夠直觀的問題

Elementor Form 內建的必填（Required）功能雖然方便，但它依賴的是瀏覽器預設的驗證訊息。當我們需要使用者勾選「隱私權政策」或「服務條款」時，系統預設跳出的「請勾選這個項目」或「請填寫此欄位」對使用者來說不夠明確。若想針對特定欄位顯示更具體的引導文字，例如「請先同意隱私權政策後再送出」，就需要透過 JavaScript 介入瀏覽器的驗證機制。

核心原理：HTML5 setCustomValidity 方法

瀏覽器在處理表單驗證時，會檢查欄位是否有 setCustomValidity 設定的錯誤訊息。只要這個方法內的字串不是空的，瀏覽器就會視該欄位為「無效」並阻止表單送出，同時彈出該字串作為警告。因此，實作的關鍵在於：當使用者未勾選時設定訊息，在勾選後立即將訊息清空，確保表單能正常運行。

實作程式碼範例

<script>
document.addEventListener('DOMContentLoaded', function() {
    var form = document.querySelector('.elementor-form');
    var targetFieldId = '#form-field-field_988ea8d'; // 替換為你的欄位 ID

    if (form) {
        // 1. 處理表單送出時的即時檢查
        form.addEventListener('submit', function() {
            var checkbox = document.querySelector(targetFieldId);
            if (checkbox && !checkbox.checked) {
                checkbox.setCustomValidity('請先同意隱私權政策後再送出');
            }
        });

        // 2. 監聽欄位狀態改變，即時清除錯誤提示
        var checkbox = document.querySelector(targetFieldId);
        if (checkbox) {
            checkbox.addEventListener('change', function() {
                if (this.checked) {
                    this.setCustomValidity(''); // 清空提示，恢復有效狀態
                } else {
                    this.setCustomValidity('請先同意隱私權政策後再送出');
                }
            });
        }
    }
});
</script>

實作步驟拆解

1. 定位目標欄位：在 Elementor 編輯器中，查看該核取方塊的「進階」設定，確認其 ID。在程式碼中，Elementor 自動生成的 ID 通常會帶有 #form-field- 前綴。
2. 監聽 Submit 事件：在表單送出瞬間進行最後確認，如果勾選框處於未選取狀態，立即給予自訂的錯誤訊息。
3. 動態更新狀態：當使用者重新勾選後，必須透過 change 事件將錯誤訊息設回空字串。如果不做這一步，即便使用者後來勾選了，瀏覽器仍會認為該欄位有無效訊息而導致無法送出。

踩坑提醒與實務建議

實作懶人包，照作就能用

操作步驟

1. 安裝並啟用 FluentSnippets 外掛
2. 新增一個程式碼片段，將文章中的 JavaScript 程式碼貼入
3. 在執行位置（Placement）設定處選擇「Site Wide Footer」
4. 到 Elementor 編輯該表單，確認核取方塊欄位的「進階 > ID」內容，並將程式碼中的 #form-field-field_988ea8d 修改為你的實際 ID
5. 點擊儲存並啟用片段
6. 清除網站快取（如有安裝快取外掛）
7. 到前台確認表單在未勾選時，是否會跳出自訂的警告文字