フォームvalidationセット

<form action="mail.php" method="post" class="wpcf7-form init contact_form" aria-label="コンタクトフォーム">
                        <div class="contact_form__item">
                            <p class="ff_gothic"><label>お名前<span class="required">※必須</span></label><input size="40" maxlength="400" class="" placeholder="レターズ" type="text" name="お名前"></p>
                        </div>
                        <div class="contact_form__item">
                            <p class="ff_gothic"><label>ふりがな<span class="required">※必須</span></label><input size="40" maxlength="400" class="" placeholder="れたーず" type="text" name="ふりがな"></p>
                        </div>
                        <div class="contact_form__item">
                            <p class="ff_gothic"><label>メールアドレス<span class="required">※必須</span></label><input size="40" maxlength="400" class="" id="your-email" placeholder="ex*****@**il.com" type="email" name="Email"></p>
                        </div>
                        <div class="contact_form__item">
                            <p class="ff_gothic"><label>メールアドレス(確認)<span class="required">※必須</span></label><input size="40" maxlength="400" class="" id="your-email-confirm" placeholder="ex*****@**il.com" type="email" name="Email（確認）"></p>
                        </div>
                        <div class="contact_form__item">
                            <p class="ff_gothic"><label>お電話番号<span class="optional">※任意</span></label><input size="40" maxlength="400" class="" placeholder="000-0000-0000" type="tel" name="電話番号"></p>
                        </div>
                        <div class="contact_form__item">
                            <p class="ff_gothic"><label>お問い合わせ内容<span class="required">※必須</span></label><textarea cols="40" rows="10" maxlength="2000" class="" placeholder="お問い合わせ内容をご入力ください" name="お問い合わせ内容"></textarea></p>
                        </div>
                        <div class="contact_form__privacy ta_center">
                            <p class="ff_gothic"><input type="checkbox" name="プライバシーポリシー[]" value="同意する" aria-label="プライバシーポリシー同意"><label><a href="https://develop-t.com/kya-reawreaw-ra/privacy/">プライバシーポリシー</a>に同意する</label></p>
                        </div>
                        <div class="ta_center">
                            <p><button type="submit" class="round_btn round_btn--blue">送信</button></p>
                        </div>
                    </form>

 validateForm: () => {
    console.log("validateForm");
    const formItems = document.querySelectorAll(".contact_form__item");

    // Add span for error message
    formItems.forEach(item => {
      const warning = document.createElement("span");
      warning.className = "warning-message";
      warning.style.color = "red";
      warning.style.display = "none";
      item.appendChild(warning);
    });

    const inputs = {
      name: document.querySelector("input[name='お名前']"),
      furigana: document.querySelector("input[name='ふりがな']"),
      email: document.getElementById("your-email"),
      emailConfirm: document.getElementById("your-email-confirm"),
      message: document.querySelector("textarea[name='お問い合わせ内容']"),
      phone: document.querySelector("input[name='電話番号']")
    };

    // Add input event listeners to validate fields on input
    Object.entries(inputs).forEach(([key, input]) => {
      input.addEventListener("input", () => {
        validateField(key, input);
      });
    });

    document.querySelector("form").addEventListener("submit", function (e) {
      let isValid = true;

      // Validate all fields on submit
      Object.entries(inputs).forEach(([key, input]) => {
        if (!validateField(key, input)) {
          isValid = false;
        }
      });

      if (!isValid) e.preventDefault();
    });

    function validateField(key, input) {
      const warning = input.closest(".contact_form__item").querySelector(".warning-message");
      let isValid = true;

      switch (key) {
        case 'name':
          if (input.value.trim() === "") {
            showWarning(input, "お名前を入力してください。");
            isValid = false;
          }
          break;
        case 'furigana':
          if (input.value.trim() === "") {
            showWarning(input, "ふりがなを入力してください。");
            isValid = false;
          }
          break;
        case 'email':
          if (input.value.trim() === "") {
            showWarning(input, "メールアドレスを入力してください。");
            isValid = false;
          } else if (!validateEmailFormat(input.value)) {
            showWarning(input, "メールアドレスの形式が正しくありません。");
            isValid = false;
          }
          break;
        case 'emailConfirm':
          if (input.value.trim() === "") {
            showWarning(input, "確認用メールアドレスを入力してください。");
            isValid = false;
          } else if (inputs.email.value !== input.value) {
            showWarning(input, "メールアドレスが一致しません。");
            isValid = false;
          }
          break;
        case 'message':
          if (input.value.trim() === "") {
            showWarning(input, "お問い合わせ内容を入力してください。");
            isValid = false;
          }
          break;
        case 'phone':
          if (input.value.trim() === "") {
            showWarning(input, "電話番号を入力してください。");
            isValid = false;
          } else if (!validatePhoneFormat(input.value)) {
            showWarning(input, "電話番号の形式が正しくありません。");
            isValid = false;
          }
          break;
      }

      if (isValid) {
        warning.style.display = "none";
        warning.textContent = "";
      }

      return isValid;
    }

    function showWarning(input, message) {
      const warning = input.closest(".contact_form__item").querySelector(".warning-message");
      warning.textContent = message;
      warning.style.display = "block";
    }

    function validateEmailFormat(email) {
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailPattern.test(email);
    }

    function validatePhoneFormat(phone) {
      const phonePattern = /^(\d{10,11}|\d{2,4}-\d{2,4}-\d{4})$/;
      return phonePattern.test(phone);
    }
  }