jQuery と Webshims を使用して HTML5 フォーム検証ポップアップをカスタマイズする方法

HTML5 フォーム検証ポップアップをカスタマイズする方法

HTML5 では、フォームに必須フィールドの組み込み検証機能が提供されます。ただし、必須フィールドが空白のままの場合に表示されるデフォルトのポップアップは、CSS でカスタマイズできないことがよくあります。

デフォルトの HTML5 フォーム検証ポップアップ

次の HTML5 フォームについて考えてみましょう。

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

ユーザーが名前フィールドに値を入力せずにフォームを送信した場合、 HTML5 では、「このフィールドは必須です」というポップアップが表示されます。このポップアップはブラウザの機能の一部であり、CSS を使用して直接変更することはできません。

エラー メッセージの変更

1 つのオプションは、setCustomValidity( ) メソッド:

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

これにより、より具体的なメッセージを提供できますが、デフォルトはポップアップ スタイルは残ります。

jQuery によるオーバーライド

ポップアップ スタイルを完全にオーバーライドするには、次の例に示すように、Webshims ライブラリと組み合わせて jQuery を使用できます。

;(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 中国語 Web サイトの他の関連記事を参照してください。