如何使用 jQuery 和 Webshims 自訂 HTML5 表單驗證彈出視窗？

如何自訂 HTML5 表單驗證彈出視窗

在 HTML5 中，表單為必填欄位提供內建驗證功能。但是，當必填欄位留空時出現的預設彈出視窗通常無法使用 CSS 進行自訂。

預設HTML5 表單驗證彈出視窗

考慮以下HTML5 表單：

<form>
    <input type="text" name="name">

如果使用者提交表單時未在名稱欄位中輸入值，HTML5 將顯示一個彈出窗口，指出「此欄位為必填項」。此彈出視窗是瀏覽器功能的一部分，無法使用 CSS 直接變更。

更改錯誤訊息

一種選擇是使用setCustomValidity( ) 方法：

document.getElementById("name").setCustomValidity("Your custom error message");

這允許您提供更具體的訊息，但保留預設的彈出樣式。

使用jQuery 覆蓋

要完全覆蓋彈出視窗樣式，您可以將jQuery 與Webshims 庫結合使用，如以下範例所示：

;(function ($) {
    webshims.setOptions('forms-ext', {
        validityMessages: {
            valueMissing: 'Your custom error message'
        },
        customMessages: true,
        replaceValidationUI: true
    });
})(jQuery);

.webshims-validity-tooltip {
    /* Style the popup here */
}

此解決方案可讓您使用CSS 設定彈出視窗樣式，提供更多驗證UI 的彈性。

結論

雖然不可能僅使用CSS 覆蓋HTML5 表單驗證彈出樣式，但使用jQuery 和Webshims 提供了一種全面的方法自訂錯誤訊息和麵板的外觀。這使開發人員能夠創建更用戶友好且美觀的客製化驗證體驗。

以上是如何使用 jQuery 和 Webshims 自訂 HTML5 表單驗證彈出視窗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！