Web Design Leaves

<form class="js-form-validation" novalidate>
  <div>
    <label for="uname">ユーザー名（半角英数字）</label><br>
    <input
      class="required pattern minlength maxlength"
      data-minlength="3"
      data-maxlength="20"
      data-pattern="alphanum"
      data-error-pattern="ユーザー名は半角英数字のみが使用できます"
      data-error-required="ユーザー名は必須です"
      type="text"
      name="uname"
      id="uname">
  </div>
  <div>
    <label for="uemail">メールアドレス </label><br>
    <input
      class="required pattern"
      data-pattern="email"
      data-error-required="メールアドレスは必須です"
      data-error-pattern="メールアドレスの形式が正しくありません"
      type="email"
      id="uemail"
      name="uemail"
      size="30">
  </div>
  <button name="send">検証</button>
</form>

document.addEventListener("DOMContentLoaded", () => {
  const settings = {
    formSelector: ".js-form-validation",
    errorClassName: "error-js",
    errorContainerClass: ".error-container",
    messages: {
      required: "入力は必須です",
      requiredSelect: "選択は必須です",
      pattern: "入力された値が正しくないようです",
      equalTo: "入力された値が一致しません",
      minlength: (min) => `${min}文字以上で入力してください`,
      maxlength: (max) => `${max}文字以内で入力してください`,
    },
    counter: {
      wrapperClass: "count-span-wrapper",
      countClass: "count-span",
      overLimitClass: "over-max-count",
      overLimitColor: "red",
    },
    scroll: {
      offset: 40,
      behavior: "smooth",
    },
  };

  const validationForms = document.querySelectorAll(settings.formSelector);

  if (!validationForms.length) return;

  validationForms.forEach((validationForm) => {
    let hasSubmittedOnce = false;

    if (validationForm.dataset.realtimeValidation === "true") {
      hasSubmittedOnce = true;
    }

    const requiredElems = validationForm.querySelectorAll(".required");
    const patternElems = validationForm.querySelectorAll(".pattern");
    const equalToElems = validationForm.querySelectorAll(".equal-to");
    const minlengthElems = validationForm.querySelectorAll(".minlength");
    const maxlengthElems = validationForm.querySelectorAll(".maxlength");
    const showCountElems = validationForm.querySelectorAll(".show-count");

    const removeError = (elem, className) => {
      const errorContainer =
        elem.closest(settings.errorContainerClass) || elem.parentNode;
      const errorSpan = errorContainer.querySelector(
        `.${settings.errorClassName}.${className}`
      );
      if (errorSpan) errorSpan.remove();
    };

    const addError = (elem, className, defaultMessage) => {
      if (!hasSubmittedOnce) return;
      removeError(elem, className);

      const errorMessage =
        elem.getAttribute(`data-error-${className}`) || defaultMessage;

      const errorSpan = document.createElement("span");
      errorSpan.classList.add(settings.errorClassName, className);
      errorSpan.setAttribute("aria-live", "polite");
      errorSpan.textContent = errorMessage;
      const errorContainer =
        elem.closest(settings.errorContainerClass) || elem.parentNode;
      errorContainer.appendChild(errorSpan);
    };

    const getValueLength = (value) =>
      (value.match(/([\uD800-\uDBFF][\uDC00-\uDFFF]|[\s\S])/g) || []).length;

    const isValueMissing = (elem) => {
      const className = "required";

      if ((elem.type === "radio" || elem.type === "checkbox") && elem.name) {
        const group = validationForm.querySelectorAll(`[name="${elem.name}"]`);
        const checked = [...group].some((el) => el.checked);

        const representative = group[0];

        if (!checked) {
          if (elem === representative) {
            addError(elem, className, settings.messages.requiredSelect);
          }
          return true;
        } else {
          if (elem === representative) {
            removeError(elem, className);
          }
          return false;
        }
      }

      if (!elem.value.trim()) {
        addError(
          elem,
          className,
          elem.tagName === "SELECT"
            ? settings.messages.requiredSelect
            : settings.messages.required
        );
        return true;
      }

      removeError(elem, className);
      return false;
    };

    const isPatternMismatch = (elem) => {
      const className = "pattern";
      const patternType = elem.getAttribute("data-pattern");
      let value = elem.value;

      const patternRegistry = {
        tel: {
          pattern: /^0\d{9,10}$/,
          preprocess: (v) => v.replace(/-/g, ""),
        },
        email: {
          pattern:
            /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
        },
        zip: { pattern: /^\d{3}-\d{4}$/ },
        alphanum: { pattern: /^[a-zA-Z0-9]+$/ },
        kana: { pattern: /^[\u30A0-\u30FFー\s]+$/ },
      };

      const def = patternRegistry[patternType];
      if (!def) return false;

      if (typeof def.preprocess === "function") {
        value = def.preprocess(value);
      }

      if (value && !def.pattern.test(value)) {
        addError(elem, className, settings.messages.pattern);
        return true;
      }

      removeError(elem, className);
      return false;
    };

    const isNotEqualTo = (elem) => {
      const className = "equal-to";
      const target = document.getElementById(
        elem.getAttribute("data-equal-to")
      );
      if (target && elem.value && target.value && elem.value !== target.value) {
        addError(elem, className, settings.messages.equalTo);
        return true;
      }
      removeError(elem, className);
      return false;
    };

    const isTooShort = (elem) => {
      const className = "minlength";
      const minlength = parseInt(elem.getAttribute("data-minlength"), 10);
      const valueLength = getValueLength(elem.value);
      if (elem.value && valueLength < minlength) {
        addError(elem, className, `${settings.messages.minlength(minlength)}`);
        return true;
      }
      removeError(elem, className);
      return false;
    };

    const isTooLong = (elem) => {
      const className = "maxlength";
      const maxlength = parseInt(elem.getAttribute("data-maxlength"), 10);
      const valueLength = getValueLength(elem.value);
      if (elem.value && valueLength > maxlength) {
        addError(elem, className, `${settings.messages.maxlength(maxlength)}`);
        return true;
      }
      removeError(elem, className);
      return false;
    };

    const attachCounter = () => {
      showCountElems.forEach((elem) => {
        const max = parseInt(elem.getAttribute("data-maxlength"), 10);
        if (!isNaN(max) && !elem.dataset.hasCounter) {
          elem.dataset.hasCounter = "true";
          const countElem = document.createElement("p");
          countElem.classList.add(settings.counter.wrapperClass);
          const countClass = settings.counter.countClass;
          countElem.innerHTML = `<span class="${countClass}">0</span>/${max}`;
          elem.parentNode.appendChild(countElem);
          const countSpan = countElem.querySelector(`.${countClass}`);

          function updateCharCount() {
            const count = getValueLength(elem.value);
            countSpan.textContent = count;
            countSpan.classList.toggle(
              settings.counter.overLimitClass,
              count > max
            );
            countSpan.style.color =
              count > max ? settings.counter.overLimitColor : "";
          }

          updateCharCount();
          elem.addEventListener("input", updateCharCount);
        }
      });
    };

    const attachValidation = () => {
      requiredElems.forEach((elem) => {
        const eventType =
          elem.type === "radio" || elem.type === "checkbox"
            ? "change"
            : "input";

        if (elem.type === "radio" || elem.type === "checkbox") {
          const group = validationForm.querySelectorAll(
            `[name="${elem.name}"]`
          );
          if (group.length && group[0] === elem) {
            group.forEach((el) => {
              el.addEventListener(eventType, () => {
                group.forEach((target) => isValueMissing(target));
              });
            });
          }
        } else {
          elem.addEventListener(eventType, () => isValueMissing(elem));
        }
      });

      patternElems.forEach((elem) =>
        elem.addEventListener("input", () => isPatternMismatch(elem))
      );

      equalToElems.forEach((elem) => {
        elem.addEventListener("input", () => isNotEqualTo(elem));
        const target = document.getElementById(
          elem.getAttribute("data-equal-to")
        );
        if (target) target.addEventListener("input", () => isNotEqualTo(elem));
      });

      minlengthElems.forEach((elem) =>
        elem.addEventListener("input", () => isTooShort(elem))
      );

      maxlengthElems.forEach((elem) =>
        elem.addEventListener("input", () => isTooLong(elem))
      );
    };

    const validateAll = () => {
      let hasError = false;
      requiredElems.forEach((elem) => {
        if (isValueMissing(elem)) hasError = true;
      });
      patternElems.forEach((elem) => {
        if (isPatternMismatch(elem)) hasError = true;
      });
      equalToElems.forEach((elem) => {
        if (isNotEqualTo(elem)) hasError = true;
      });
      minlengthElems.forEach((elem) => {
        if (isTooShort(elem)) hasError = true;
      });
      maxlengthElems.forEach((elem) => {
        if (isTooLong(elem)) hasError = true;
      });
      return hasError;
    };

    validationForm.addEventListener("submit", (e) => {
      hasSubmittedOnce = true;
      const hasError = validateAll();
      if (hasError) {
        e.preventDefault();
        const errorElem = validationForm.querySelector(
          `.${settings.errorClassName}`
        );
        const offset =
          parseInt(validationForm.dataset.errorOffset, 10) ||
          settings.scroll.offset;
        if (errorElem) {
          window.scrollTo({
            top: errorElem.offsetTop - offset,
            behavior: settings.scroll.behavior,
          });
        }
      }
    });

    attachValidation();
    attachCounter();
  });
});

<form class="js-form-validation" novalidate>
  <div>
    <label for="name">お名前 </label><br>
    <input class="required maxlength" data-maxlength="30" data-error-required="お名前は必須です" type="text" name="name" id="name">
  </div>
  ...
</form>

 ...
<script src="path/to/form-validation.js"></script>

<div>
  <label for="uname">ユーザー名</label>
  <input class="required minlength maxlength" data-error-required="ユーザー名は必須です" data-minlength="3" data-maxlength="20" type="text" name="uname" id="uname">
  <!-- 挿入されるエラーの span 要素 -->
  <span class="error-js required" aria-live="polite">ユーザー名は必須です</span>
</div>

document.addEventListener("DOMContentLoaded", () => {
  // 設定オブジェクト
  const settings = {
    // バリデーション対象とするフォームのクラス名
    formSelector: ".js-form-validation",

    // エラー表示用の span 要素に付与するクラス名
    errorClassName: "error-js",

    // エラー表示を追加する親要素のクラス（省略可）
    errorContainerClass: ".error-container",

    // 各種検証項目に対応したデフォルトのエラーメッセージ
    messages: {
      required: "入力は必須です", // テキストやテキストエリアが未入力の場合
      requiredSelect: "選択は必須です", // チェックボックスやラジオボタン、セレクトボックスで未選択の場合
      pattern: "入力された値が正しくないようです", // パターン（正規表現）検証に失敗した場合
      equalTo: "入力された値が一致しません", // 他の項目と値が一致していない場合
      minlength: (min) => `${min}文字以上で入力してください`, // 指定文字数未満
      maxlength: (max) => `${max}文字以内で入力してください`, // 指定文字数超過
    },

    // 入力文字数カウント機能の見た目に関する設定
    counter: {
      wrapperClass: "count-span-wrapper", // カウント表示全体のラッパー要素に使うクラス
      countClass: "count-span", // 実際の文字数を表示する要素のクラス
      overLimitClass: "over-max-count", // 上限超過時に付与されるクラス（スタイル変更用）
      overLimitColor: "red", // 上限を超えた場合の文字色（インラインスタイルに設定。例 color: red）
    },

    // スクロール関連の設定
    scroll: {
      // スクロール位置のオフセット（data-error-offset が未指定の場合に使う）
      offset: 40,
      // スクロール動作（"smooth"|"auto"|"instant"）
      behavior: "smooth",
    },
  };

  // バリデーション対象の全てのフォーム要素を取得
  const validationForms = document.querySelectorAll(settings.formSelector);

  // バリデーション対象のフォームが1つもない場合は処理を終了
  if (!validationForms.length) return;

  // バリデーション対象の各フォーム要素ごとに処理
  validationForms.forEach((validationForm) => {
    // フォーム送信済みかどうかを示すフラグ（false の間はリアルタイム検証を無効化）
    let hasSubmittedOnce = false;

    // form 要素に data-realtime-validation="true" が指定されていれば送信前でもリアルタイムでの検証を行う
    if (validationForm.dataset.realtimeValidation === "true") {
      hasSubmittedOnce = true;
    }

    // 各種バリデーション対象の要素を取得
    const requiredElems = validationForm.querySelectorAll(".required");
    const patternElems = validationForm.querySelectorAll(".pattern");
    const equalToElems = validationForm.querySelectorAll(".equal-to");
    const minlengthElems = validationForm.querySelectorAll(".minlength");
    const maxlengthElems = validationForm.querySelectorAll(".maxlength");
    const showCountElems = validationForm.querySelectorAll(".show-count");

    /**
     * エラーメッセージを削除する関数
     */
    const removeError = (elem, className) => {
      // error-container クラスの要素または親要素
      const errorContainer =
        elem.closest(settings.errorContainerClass) || elem.parentNode;
      const errorSpan = errorContainer.querySelector(
        `.${settings.errorClassName}.${className}`
      );
      if (errorSpan) errorSpan.remove();
    };

    /**
     * エラーメッセージを表示する関数
     */
    const addError = (elem, className, defaultMessage) => {
      // まだ送信していなければリアルタイム検証しない
      if (!hasSubmittedOnce) return;
      // すでに同じエラーがあれば削除（重複防止）
      removeError(elem, className);

      // data-error-[className] 属性に独自メッセージが指定されていればそれを優先、なければ defaultMessage を使用
      const errorMessage =
        elem.getAttribute(`data-error-${className}`) || defaultMessage;

      // エラーメッセージ用の要素を作成して追加
      const errorSpan = document.createElement("span");
      errorSpan.classList.add(settings.errorClassName, className);
      errorSpan.setAttribute("aria-live", "polite"); // 音声読み上げ対応
      errorSpan.textContent = errorMessage;
      // error-container クラスが指定されている親要素があればそこへ、なければ親要素にエラーを出力
      const errorContainer =
        elem.closest(settings.errorContainerClass) || elem.parentNode;
      errorContainer.appendChild(errorSpan);
    };

    // マルチバイト文字（サロゲートペア含む）対応の文字数カウント（絵文字・日本語などに対応）
    const getValueLength = (value) =>
      (value.match(/([\uD800-\uDBFF][\uDC00-\uDFFF]|[\s\S])/g) || []).length;

    /**
     * 必須項目のバリデーション
     */
    const isValueMissing = (elem) => {
      const className = "required";

      // ラジオボタン・チェックボックスの場合
      if ((elem.type === "radio" || elem.type === "checkbox") && elem.name) {
        // ラジオボタン・チェックボックスは同じnameのグループで判定
        const group = validationForm.querySelectorAll(`[name="${elem.name}"]`);
        // 選択されているかをチェック
        const checked = [...group].some((el) => el.checked);

        // 代表要素（最初の要素）
        const representative = group[0];

        if (!checked) {
          // 代表要素だけがエラーの表示／削除を行う（エラーメッセージの上書きを防ぐ）
          if (elem === representative) {
            addError(elem, className, settings.messages.requiredSelect);
          }
          return true;
        } else {
          if (elem === representative) {
            removeError(elem, className);
          }
          return false;
        }
      }

      // 通常の入力要素（text, select など）の場合
      if (!elem.value.trim()) {
        addError(
          elem,
          className,
          elem.tagName === "SELECT"
            ? settings.messages.requiredSelect
            : settings.messages.required
        );
        return true;
      }

      removeError(elem, className);
      return false;
    };

    /**
     * パターン（正規表現）バリデーション
     */
    const isPatternMismatch = (elem) => {
      const className = "pattern";
      const patternType = elem.getAttribute("data-pattern");
      let value = elem.value;

      // 正規表現パターンを定義
      const patternRegistry = {
        tel: {
          pattern: /^0\d{9,10}$/,
          preprocess: (v) => v.replace(/-/g, ""), // ハイフン除去
        },
        email: {
          pattern:
            /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
        },
        zip: { pattern: /^\d{3}-\d{4}$/ }, // 郵便番号
        alphanum: { pattern: /^[a-zA-Z0-9]+$/ }, // 英数字
        kana: { pattern: /^[\u30A0-\u30FFー\s]+$/ }, // カタカナ
        // 必要に応じて他のパターンも追加可能
      };

      // 定義したパターンに patternType が含まれているか確認
      const def = patternRegistry[patternType];
      // 未定義のパターンタイプはチェックしない
      if (!def) return false;

      // 前処理（例: ハイフン除去など）
      if (typeof def.preprocess === "function") {
        value = def.preprocess(value);
      }

      // バリデーションを実行し、マッチしなければエラーを表示
      if (value && !def.pattern.test(value)) {
        addError(elem, className, settings.messages.pattern);
        return true;
      }

      removeError(elem, className);
      return false;
    };

    /**
     * 他の入力と一致しているか（値一致の確認用）
     */
    const isNotEqualTo = (elem) => {
      const className = "equal-to";
      // data-equal-to 属性に指定された id を使って比較対象の要素を取得
      const target = document.getElementById(
        elem.getAttribute("data-equal-to")
      );
      // 両方に値があり、かつ不一致ならエラーを表示
      if (target && elem.value && target.value && elem.value !== target.value) {
        addError(elem, className, settings.messages.equalTo);
        return true;
      }
      removeError(elem, className);
      return false;
    };

    /**
     * 最小文字数バリデーション
     */
    const isTooShort = (elem) => {
      const className = "minlength";
      const minlength = parseInt(elem.getAttribute("data-minlength"), 10);
      const valueLength = getValueLength(elem.value);
      if (elem.value && valueLength < minlength) {
        addError(elem, className, `${settings.messages.minlength(minlength)}`);
        return true;
      }
      removeError(elem, className);
      return false;
    };

    /**
     * 最大文字数バリデーション
     */
    const isTooLong = (elem) => {
      const className = "maxlength";
      const maxlength = parseInt(elem.getAttribute("data-maxlength"), 10);
      const valueLength = getValueLength(elem.value);
      if (elem.value && valueLength > maxlength) {
        addError(elem, className, `${settings.messages.maxlength(maxlength)}`);
        return true;
      }
      removeError(elem, className);
      return false;
    };

    /**
     * 入力文字数カウンター表示
     */
    const attachCounter = () => {
      showCountElems.forEach((elem) => {
        const max = parseInt(elem.getAttribute("data-maxlength"), 10);
        if (!isNaN(max) && !elem.dataset.hasCounter) {
          // 追加済みフラグを設定（同じ要素に複数回 append されるのを防ぐ）
          elem.dataset.hasCounter = "true";
          const countElem = document.createElement("p");
          countElem.classList.add(settings.counter.wrapperClass);
          const countClass = settings.counter.countClass;
          countElem.innerHTML = `<span class="${countClass}">0</span>/${max}`;
          elem.parentNode.appendChild(countElem);
          // 生成したカウント用の span 要素を取得
          const countSpan = countElem.querySelector(`.${countClass}`);

          // 文字数を更新する関数
          function updateCharCount() {
            const count = getValueLength(elem.value);
            countSpan.textContent = count;
            countSpan.classList.toggle(
              settings.counter.overLimitClass,
              count > max
            );
            countSpan.style.color =
              count > max ? settings.counter.overLimitColor : "";
          }

          // 初期状態でのカウント表示
          updateCharCount();
          // リアルタイムで文字数更新
          elem.addEventListener("input", updateCharCount);
        }
      });
    };

    /**
     * リアルタイムバリデーションイベントの設定
     */
    const attachValidation = () => {
      requiredElems.forEach((elem) => {
        const eventType =
          elem.type === "radio" || elem.type === "checkbox"
            ? "change"
            : "input";

        // ラジオボタンまたはチェックボックスの場合
        if (elem.type === "radio" || elem.type === "checkbox") {
          const group = validationForm.querySelectorAll(
            `[name="${elem.name}"]`
          );
          // グループ内で1回だけイベント登録処理を行うための条件
          if (group.length && group[0] === elem) {
            group.forEach((el) => {
              el.addEventListener(eventType, () => {
                group.forEach((target) => isValueMissing(target));
              });
            });
          }
        } else {
          // ラジオボタン・チェックボックス以外の場合
          elem.addEventListener(eventType, () => isValueMissing(elem));
        }
      });

      patternElems.forEach((elem) =>
        elem.addEventListener("input", () => isPatternMismatch(elem))
      );

      equalToElems.forEach((elem) => {
        elem.addEventListener("input", () => isNotEqualTo(elem));
        const target = document.getElementById(
          elem.getAttribute("data-equal-to")
        );
        if (target) target.addEventListener("input", () => isNotEqualTo(elem));
      });

      minlengthElems.forEach((elem) =>
        elem.addEventListener("input", () => isTooShort(elem))
      );

      maxlengthElems.forEach((elem) =>
        elem.addEventListener("input", () => isTooLong(elem))
      );
    };

    /**
     * 全項目のバリデーションを実行
     */
    const validateAll = () => {
      let hasError = false;
      requiredElems.forEach((elem) => {
        if (isValueMissing(elem)) hasError = true;
      });
      patternElems.forEach((elem) => {
        if (isPatternMismatch(elem)) hasError = true;
      });
      equalToElems.forEach((elem) => {
        if (isNotEqualTo(elem)) hasError = true;
      });
      minlengthElems.forEach((elem) => {
        if (isTooShort(elem)) hasError = true;
      });
      maxlengthElems.forEach((elem) => {
        if (isTooLong(elem)) hasError = true;
      });
      return hasError;
    };

    /**
     * フォーム送信イベント
     */
    validationForm.addEventListener("submit", (e) => {
      hasSubmittedOnce = true; // 以降エラー表示を有効にする
      const hasError = validateAll();
      if (hasError) {
        // エラーがあるため送信をキャンセル
        e.preventDefault();
        const errorElem = validationForm.querySelector(
          `.${settings.errorClassName}`
        );
        // form 要素の data-error-offset を数値として取得（スクロールのオフセット調整）
        const offset =
          parseInt(validationForm.dataset.errorOffset, 10) ||
          settings.scroll.offset;
        if (errorElem) {
          window.scrollTo({
            top: errorElem.offsetTop - offset,
            behavior: settings.scroll.behavior,
          });
        }
      }
    });

    // バリデーションとカウンターを初期化
    attachValidation();
    attachCounter();
  });
});

messages: {
  // 日本語（キー名には W3C の言語コード（BCP 47）に基づく "ja" を使用）
  ja: {
    required: "入力は必須です",
    requiredSelect: "選択は必須です",
    pattern: "入力された値が正しくないようです",
    equalTo: "入力された値が一致しません",
    minlength: (min) => `${min}文字以上で入力してください`,
    maxlength: (max) => `${max}文字以内で入力してください`,
  },
  // 英語
  en: {
    required: "This field is required.",
    requiredSelect: "Please make a selection.",
    pattern: "The entered value appears to be invalid.",
    equalTo: "The values do not match.",
    minlength: (min) => `Please enter at least ${min} characters.`,
    maxlength: (max) => `Please enter no more than ${max} characters.`,
  },
},
fallbackLang: "ja", // デフォルト（フォールバック）言語を指定

// 言語設定をフォームの data-lang 属性 → lang 属性 → HTML の lang 属性 → fallbackLang の順で取得
const currentLang =
  validationForm.dataset.lang || // ① data-lang 属性（最優先）
  validationForm.getAttribute("lang") || // ② form 要素の lang 属性
  document.documentElement.lang || // ③ <html lang="..."> の値
  settings.fallbackLang; // ④ fallback（デフォルト）

// 大文字・小文字の違いによる不一致を防ぐ
const lang = currentLang.toLowerCase();
// 基本言語（ベース言語）を抽出
const baseLang = lang.split("-")[0]; // 例: "en-us" → "en"

// 優先順位にしたがってメッセージを取得（存在しなければ fallbackLang を使用）
const messages =
  settings.messages[currentLang] ||  // 元の値そのまま（例: "en-US", "ja-JP"）
  settings.messages[lang] ||         // 小文字化した値（例: "en-us", "ja-jp"）
  settings.messages[baseLang] ||     // ベース言語（例: "en", "ja"）
  settings.messages[settings.fallbackLang];   // fallback（デフォルト）

//不正な言語コード（settings.messages に存在しないキー）が指定されていた場合にコンソールに警告を出力
if (!settings.messages[lang] && !settings.messages[baseLang]) {
  console.warn(
    `Unsupported language "${currentLang}". Falling back to "${settings.fallbackLang}".`
  );
}

addError(elem, className, messages.requiredSelect);

document.addEventListener("DOMContentLoaded", () => {
  const settings = {
    formSelector: ".js-form-validation",
    errorClassName: "error-js",
    errorContainerClass: ".error-container",

    messages: {
      // 日本語（キー名には W3C の言語コード（BCP 47）に基づく "ja" を使用）
      ja: {
        required: "入力は必須です",
        requiredSelect: "選択は必須です",
        pattern: "入力された値が正しくないようです",
        equalTo: "入力された値が一致しません",
        minlength: (min) => `${min}文字以上で入力してください`,
        maxlength: (max) => `${max}文字以内で入力してください`,
      },
      // 英語
      en: {
        required: "This field is required.",
        requiredSelect: "Please make a selection.",
        pattern: "The entered value appears to be invalid.",
        equalTo: "The values do not match.",
        minlength: (min) => `Please enter at least ${min} characters.`,
        maxlength: (max) => `Please enter no more than ${max} characters.`,
      },
    },
    // デフォルト（フォールバック）言語を指定
    fallbackLang: "ja",

    counter: {
      wrapperClass: "count-span-wrapper",
      countClass: "count-span",
      overLimitClass: "over-max-count",
      overLimitColor: "red",
    },
    scroll: {
      offset: 40,
      behavior: "smooth",
    },
  };

  const validationForms = document.querySelectorAll(settings.formSelector);

  if (!validationForms.length) return;

  validationForms.forEach((validationForm) => {
    let hasSubmittedOnce = false;

    if (validationForm.dataset.realtimeValidation === "true") {
      hasSubmittedOnce = true;
    }

    // 言語設定をフォームの data-lang 属性 → lang 属性 → HTML の lang 属性 → fallbackLang の順で取得
    const currentLang =
      validationForm.dataset.lang || // ① data-lang 属性（最優先）
      validationForm.getAttribute("lang") || // ② form 要素の lang 属性
      document.documentElement.lang || // ③ <html lang="..."> の値
      settings.fallbackLang; // ④ fallback（デフォルト）

    // 小文字変換とベース言語抽出
    const lang = currentLang.toLowerCase();
    const baseLang = lang.split("-")[0]; // 例: "en-us" → "en"

    // 優先順位にしたがってメッセージを取得（存在しなければ fallbackLang を使用）
    const messages =
      settings.messages[currentLang] ||  // 元の値そのまま（例: "en-US", "ja-JP"）
      settings.messages[lang] ||         // 小文字化した値（例: "en-us", "ja-jp"）
      settings.messages[baseLang] ||     // ベース言語（例: "en", "ja"）
      settings.messages[settings.fallbackLang];   // fallback（デフォルト）

    //不正な言語コード（settings.messages に存在しないキー）が指定されていた場合にコンソールに警告を出力
    if (!settings.messages[lang] && !settings.messages[baseLang]) {
      console.warn(
        `Unsupported language "${currentLang}". Falling back to "${settings.fallbackLang}".`
      );
    }

    const requiredElems = validationForm.querySelectorAll(".required");
    const patternElems = validationForm.querySelectorAll(".pattern");
    const equalToElems = validationForm.querySelectorAll(".equal-to");
    const minlengthElems = validationForm.querySelectorAll(".minlength");
    const maxlengthElems = validationForm.querySelectorAll(".maxlength");
    const showCountElems = validationForm.querySelectorAll(".show-count");

    const removeError = (elem, className) => {
      const errorContainer =
        elem.closest(settings.errorContainerClass) || elem.parentNode;
      const errorSpan = errorContainer.querySelector(
        `.${settings.errorClassName}.${className}`
      );
      if (errorSpan) errorSpan.remove();
    };

    const addError = (elem, className, defaultMessage) => {
      if (!hasSubmittedOnce) return;
      removeError(elem, className);

      const errorMessage =
        elem.getAttribute(`data-error-${className}`) || defaultMessage;

      const errorSpan = document.createElement("span");
      errorSpan.classList.add(settings.errorClassName, className);
      errorSpan.setAttribute("aria-live", "polite");
      errorSpan.textContent = errorMessage;
      const errorContainer =
        elem.closest(settings.errorContainerClass) || elem.parentNode;
      errorContainer.appendChild(errorSpan);
    };

    const getValueLength = (value) =>
      (value.match(/([\uD800-\uDBFF][\uDC00-\uDFFF]|[\s\S])/g) || []).length;

    const isValueMissing = (elem) => {
      const className = "required";
      if ((elem.type === "radio" || elem.type === "checkbox") && elem.name) {
        const group = validationForm.querySelectorAll(`[name="${elem.name}"]`);
        const checked = [...group].some((el) => el.checked);
        const representative = group[0];
        if (!checked) {
          if (elem === representative) {
            // デフォルトのエラーメッセージには、messagesオブジェクトの該当項目を使用
            addError(elem, className, messages.requiredSelect);
          }
          return true;
        } else {
          if (elem === representative) {
            removeError(elem, className);
          }
          return false;
        }
      }

      if (!elem.value.trim()) {
        // デフォルトのエラーメッセージには、messagesオブジェクトの該当項目を使用
        addError(
          elem,
          className,
          elem.tagName === "SELECT"
            ? messages.requiredSelect
            : messages.required
        );
        return true;
      }
      removeError(elem, className);
      return false;
    };

    const isPatternMismatch = (elem) => {
      const className = "pattern";
      const patternType = elem.getAttribute("data-pattern");
      let value = elem.value;

      const patternRegistry = {
        tel: {
          pattern: /^0\d{9,10}$/,
          preprocess: (v) => v.replace(/-/g, ""),
        },
        email: {
          pattern:
            /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
        },
        zip: { pattern: /^\d{3}-\d{4}$/ },
        alphanum: { pattern: /^[a-zA-Z0-9]+$/ },
        kana: { pattern: /^[\u30A0-\u30FFー\s]+$/ },
      };

      const def = patternRegistry[patternType];
      if (!def) return false;

      if (typeof def.preprocess === "function") {
        value = def.preprocess(value);
      }

      if (value && !def.pattern.test(value)) {
        // デフォルトのエラーメッセージには、messagesオブジェクトの該当項目を使用
        addError(elem, className, messages.pattern);
        return true;
      }

      removeError(elem, className);
      return false;
    };

    const isNotEqualTo = (elem) => {
      const className = "equal-to";
      const target = document.getElementById(
        elem.getAttribute("data-equal-to")
      );
      if (target && elem.value && target.value && elem.value !== target.value) {
        // デフォルトのエラーメッセージには、messagesオブジェクトの該当項目を使用
        addError(elem, className, messages.equalTo);
        return true;
      }
      removeError(elem, className);
      return false;
    };

    const isTooShort = (elem) => {
      const className = "minlength";
      const minlength = parseInt(elem.getAttribute("data-minlength"), 10);
      const valueLength = getValueLength(elem.value);
      if (elem.value && valueLength < minlength) {
        // デフォルトのエラーメッセージには、messagesオブジェクトの該当項目を使用
        addError(elem, className, `${messages.minlength(minlength)}`);
        return true;
      }
      removeError(elem, className);
      return false;
    };

    const isTooLong = (elem) => {
      const className = "maxlength";
      const maxlength = parseInt(elem.getAttribute("data-maxlength"), 10);
      const valueLength = getValueLength(elem.value);
      if (elem.value && valueLength > maxlength) {
        // デフォルトのエラーメッセージには、messagesオブジェクトの該当項目を使用
        addError(elem, className, `${messages.maxlength(maxlength)}`);
        return true;
      }
      removeError(elem, className);
      return false;
    };

    const attachCounter = () => {
      showCountElems.forEach((elem) => {
        const max = parseInt(elem.getAttribute("data-maxlength"), 10);
        if (!isNaN(max) && !elem.dataset.hasCounter) {
          elem.dataset.hasCounter = "true";
          const countElem = document.createElement("p");
          countElem.classList.add(settings.counter.wrapperClass);
          const countClass = settings.counter.countClass;
          countElem.innerHTML = `<span class="${countClass}">0</span>/${max}`;
          elem.parentNode.appendChild(countElem);
          const countSpan = countElem.querySelector(`.${countClass}`);

          function updateCharCount() {
            const count = getValueLength(elem.value);
            countSpan.textContent = count;
            countSpan.classList.toggle(
              settings.counter.overLimitClass,
              count > max
            );
            countSpan.style.color =
              count > max ? settings.counter.overLimitColor : "";
          }

          updateCharCount();
          elem.addEventListener("input", updateCharCount);
        }
      });
    };

    const attachValidation = () => {
      requiredElems.forEach((elem) => {
        const eventType =
          elem.type === "radio" || elem.type === "checkbox"
            ? "change"
            : "input";

        if (elem.type === "radio" || elem.type === "checkbox") {
          const group = validationForm.querySelectorAll(
            `[name="${elem.name}"]`
          );
          if (group.length && group[0] === elem) {
            group.forEach((el) => {
              el.addEventListener(eventType, () => {
                group.forEach((target) => isValueMissing(target));
              });
            });
          }
        } else {
          elem.addEventListener(eventType, () => isValueMissing(elem));
        }
      });

      patternElems.forEach((elem) =>
        elem.addEventListener("input", () => isPatternMismatch(elem))
      );

      equalToElems.forEach((elem) => {
        elem.addEventListener("input", () => isNotEqualTo(elem));
        const target = document.getElementById(
          elem.getAttribute("data-equal-to")
        );
        if (target) target.addEventListener("input", () => isNotEqualTo(elem));
      });

      minlengthElems.forEach((elem) =>
        elem.addEventListener("input", () => isTooShort(elem))
      );

      maxlengthElems.forEach((elem) =>
        elem.addEventListener("input", () => isTooLong(elem))
      );
    };

    const validateAll = () => {
      let hasError = false;
      requiredElems.forEach((elem) => {
        if (isValueMissing(elem)) hasError = true;
      });
      patternElems.forEach((elem) => {
        if (isPatternMismatch(elem)) hasError = true;
      });
      equalToElems.forEach((elem) => {
        if (isNotEqualTo(elem)) hasError = true;
      });
      minlengthElems.forEach((elem) => {
        if (isTooShort(elem)) hasError = true;
      });
      maxlengthElems.forEach((elem) => {
        if (isTooLong(elem)) hasError = true;
      });
      return hasError;
    };

    validationForm.addEventListener("submit", (e) => {
      hasSubmittedOnce = true;
      const hasError = validateAll();
      if (hasError) {
        e.preventDefault();
        const errorElem = validationForm.querySelector(
          `.${settings.errorClassName}`
        );
        const offset =
          parseInt(validationForm.dataset.errorOffset, 10) ||
          settings.scroll.offset;
        if (errorElem) {
          window.scrollTo({
            top: errorElem.offsetTop - offset,
            behavior: settings.scroll.behavior,
          });
        }
      }
    });

    attachValidation();
    attachCounter();
  });
});