document.addEventListener("DOMContentLoaded", function () {
  const checkFieldName = "text"; // チェック対象のinput要素のname属性
  const API_URL = 'https://example.com/api/validate'; // カスタムAPIのURLに変更してください

  // 入力フィールド、送信ボタン、結果表示領域の取得
  const inputField = document.querySelector("[name='" + checkFieldName + "']");
  const submitButton = document.querySelector(".sp-form-next-button");
  const resultMessage = document.getElementById("result");

  if (!inputField) {
    console.error("要素 [name='" + checkFieldName + "'] が見つかりません");
    return;
  }

  // 初期状態では登録ボタンを無効化（※ フォームがない場合は、この処理は任意で利用してください）
  if (submitButton) {
    submitButton.disabled = true;
  }

  /**
   * APIを呼び出して検証を実施する処理
   * @param {string} value - 検証対象の値
   * @returns {Promise<object>} - APIから返されたレスポンスのJSON
   */
  async function performValidation(value) {
    try {
      const response = await fetch(API_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ inputText: value })
      });
      return await response.json();
    } catch (error) {
      // 通信エラーの場合はエラーオブジェクトをthrow
      throw new Error("通信エラー");
    }
  }

  /**
   * UIの更新を担当する処理
   * @param {Object} options
   * @param {string} options.message - 表示するメッセージ
   * @param {string} options.color - メッセージの色
   * @param {boolean} options.isValid - 登録ボタンの有効状態（true:有効、false:無効）
   */
  function updateUI({ message, color, isValid }) {
    resultMessage.textContent = message;
    resultMessage.style.color = color;
    if (submitButton) {
      submitButton.disabled = !isValid;
    }
  }

  /**
   * 全体の検証処理（入力チェック → API呼び出し → UI更新）を実施する関数
   */
  window.validate = async function () {
    const checkValue = inputField.value;

    if (!checkValue) {
      updateUI({ message: "値を入力してください", color: "red", isValid: false });
      return;
    }

    try {
      const data = await performValidation(checkValue);
      if (data.status === "success" && data.data && data.data.status === "success") {
        updateUI({ message: "success", color: "green", isValid: true });
      } else {
        const errorMsg = (data.data && data.data.errorMessage) || data.errorMessage || "不明なエラー";
        updateUI({ message: "エラー: " + errorMsg, color: "red", isValid: false });
      }
    } catch (error) {
      updateUI({ message: error.message, color: "red", isValid: false });
    }
  };
});
                

const checkFieldName = "text"; // チェック対象のinput要素のname属性
const API_URL = 'https://example.com/api/validate'; // カスタムAPIのURLに変更してください
                

<input type="text" name="text">
<p id="result"></p>
<button type="button" onclick="validate()">検証</button>
                

/* 必要に応じてスタイルを追加してください */
#result {
    font-size: 1.2em;
    margin-top: 10px;
}
.sp-form-next-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}