🤨

フォームの検証メッセージをカスタマイズする

2023/01/06に公開

HTML

JavaScript

form

tech

フォームの検証メッセージをカスタマイズする方法です。

ブラウザデフォルトの検証メッセージからカスタマイズしたい
ブラウザによって検証メッセージが異なる場合があるので揃えたい(ChromeとSafariで違うなど…)

このような場合に使えます。
(未検証ですが、ブラウザがローカライズ対応している検証メッセージをJavaScriptで上書きしているので、多言語対応が必要な場合は言語ごとに追加で分岐するなど、追加で対応が必要になると思います。後で確認して追記します。)
(*2023/01/12追記
PCとブラウザの設定を英語(US)に切り替えて表示を確認しました。ブラウザがローカライズ対応している検証メッセージをJavaScriptで上書きしてしまうため、多言語対応が必要な場合は言語ごとに分岐するなど、追加対応が必要になります。)

手順

要素を取得
要素にinvalidのイベントリスナーを設定
検証の状態(ValidityState)によって分岐
カスタマイズした検証メッセージを表示

例

inputにはmin="10", max="100"を設定しています。
inputに入力された値が以下の場合、カスタマイズした検証メッセージを表示する例です。

10を下回った場合(rangeUnderflow)
100を上回る数値が入力された場合(rangeOverflow)

コード

index.html

<form>
  <label for="targetInput">数値
  <input id="targetInput" type="number" min="10" max="100" required aria-describedby="hint">
</label>
  <p id="hint">10以上、100以下の数値を入力してください。</p>
  <button>送信</button>
</form>

index.js

// 1.検証メッセージを調整したい要素を取得
const targetInput = document.getElementById("targetInput");
// 2.要素にinvalidのイベントリスナーを設定
targetInput.addEventListener("invalid", () => {
  // validityが状態をValidityStateで返す。(ValidityStateはobject)
  //console.log(targetInput.validity);

  //3. 検証の状態によって分岐
  // 4-①.数値が下回っている場合
  if (targetInput.validity.rangeUnderflow) {
    // Chromeのデフォルトの表記 "値は10以上にする必要があります。"
    targetInput.setCustomValidity("数値が10以下です。値を確認してください。");
    // 4-②.数値が上回っている場合
  } else if (targetInput.validity.rangeOverflow) {
    // Chromeのデフォルトの表記 "値は100以下にする必要があります。"
    targetInput.setCustomValidity("数値が100以上です。値を確認してください。");
    // 4-③.それ以外の場合
  } else {
    // カスタム検証メッセージをリセット
    targetInput.setCustomValidity("");
  }
});

フォームの検証メッセージをカスタマイズする

手順

例

コード

CodePen

参考

Discussion