Snow Monkey Formsでファイル形式をチェックする方法

  // ファイル形式のエラーメッセージをカスタマイズ（JS側）-----------
  // 許可する拡張子とファイル入力のname属性を配列で管理
  const allowedExt = ["pdf", "xlsx", "xls"]; // 許可する拡張子
  const fileNames = ["file-1", "file-2", "file-3"]; // 対象のファイル入力のname属性

  // ＜バリデーション関数＞
  // フォーム要素（特に <input>, <select>, <textarea>）の値が変更されたとき(changeイベント)に呼び出されます。
  // この場合、ユーザーがファイル選択ダイアログでファイルを選び「開く」を押したときに、発火します。
  // 既にイベントが登録されている場合は、一度removeEventListenerで解除してから再登録しているので、二重登録防止も行なっています。
  const addFileValidation = () => {
    fileNames.forEach((name) => {
      const fileInput = document.querySelector(
        `input[type="file"][name="${name}"]`
      );
      if (!fileInput) return;

      // 二重登録防止: 既存のchangeイベントリスナーを解除してから再登録
      fileInput.removeEventListener("change", handleFileChange);
      fileInput.addEventListener("change", handleFileChange);
    });
  };

  // ＜ファイル選択時の処理＞
  // ファイルの拡張子を取得し、許可された拡張子に含まれていなければ警告を表示し、
  // ファイル入力の値を空にリセットすることで、無効なファイルのアップロードを防ぎます。
  function handleFileChange(e) {
    const file = e.target.files[0];
    if (!file) return;

    const ext = file.name.split(".").pop().toLowerCase();
    if (!allowedExt.includes(ext)) {
      alert(
        "アップロードできるファイル形式は PDF または Excel（xls, xlsx）のみです。" // ファイルの拡張子が違う時のエラーメッセージ
      );
      e.target.value = ""; // 無効なファイルをリセット
    }
  }

  // ページ読み込み時に初期化
  document.addEventListener("DOMContentLoaded", () => {
    addFileValidation();

    // Snow Monkey Forms が data-screen を書き換えた時を監視
    // フォームの画面遷移などでdata-screen属性が変更されると、
    // DOMが動的に変わる可能性があるため、MutationObserver（DOM変化を監視するネイティブAPI）を使って属性の変化を監視し、
    // 変化があった場合に再度バリデーション関数を呼び出してイベントリスナーを再設定します。
    // これにより、フォームの状態変化に応じて常に正しいバリデーションが適用されるようになります。
    const form = document.querySelector(".snow-monkey-form");
    if (!form) return;

    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        if (
          mutation.type === "attributes" &&
          mutation.attributeName === "data-screen"
        ) {
          // invalid (フォーム既存のエラーが発動した)状態になったら再度バリデーションを付与
          addFileValidation();
        }
      }
    });

    observer.observe(form, {
      attributes: true,
      attributeFilter: ["data-screen"],
    });
  });