英語名のスパムアカウントの登録を防ぐ方法（参考）

前提

CommChatをご利用いただく上で、Google reCAPTCHAをOFFにする必要がございます。
参考
この機能をOFFにした場合、英語名のスパムアカウントが大量に登録される店舗様が発生しましたので、その対応方法をご案内します。

対応方法

注意

あくまでこの対応方法は参考例となりますので、内容を確認した上で、店舗様の責任の範囲で実装をお願いいたします。
以下のコードは、DAWN で利用いただけます。
汎用的に使えるようにどのテーマでも共通して使えるロジックベースで作成してます。テーマによってはそのまま使用すると動作しない可能性もありますので、適宜テーマに合わせてカスタマイズを加えてください。

アカウント登録フォームの登録ボタンのbutton要素にid="register-submit" disabledを追加する

アカウント登録フォームのUIを含むLiquidファイル（DAWNの場合はsections/main-register.liquid）の最下部に下記コードを追加

コード

※英語名のアカウント登録を防ぐ（英語入力ができなくなる）内容になります。

Plaintext

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var firstNameInput = document.querySelector('input[name="customer[first_name]"]');
    var lastNameInput = document.querySelector('input[name="customer[last_name]"]');
    var emailInput = document.querySelector('input[name="customer[email]"]');
    var passwordInput = document.querySelector('input[name="customer[password]"]');
    var submitButton = document.getElementById('register-submit');
    var nameValidationPattern = /^[\u3040-\u30ff\u4e00-\u9faf\u3400-\u4dbf]+$/;

    // 初期状態で送信ボタンを無効に設定
    submitButton.disabled = true;

    // 名前フィールドのバリデーション関数
    function validateNameInput(input) {
      // 名前フィールドにひらがな、カタカナ、漢字以外の文字が含まれているかをチェック
      if (!nameValidationPattern.test(input.value)) {
        input.setCustomValidity("ひらがな、カタカナ、漢字のみ入力可能です。");
      } else {
        input.setCustomValidity("");
      }
      updateSubmitButtonState();
    }

    // すべてのフィールドが適切に入力されているかをチェックし、送信ボタンの状態を更新
    function updateSubmitButtonState() {
      if (
        firstNameInput.checkValidity() &&
        lastNameInput.checkValidity() &&
        emailInput.value.trim() !== "" &&
        passwordInput.value.trim() !== ""
      ) {
        submitButton.disabled = false;
      } else {
        submitButton.disabled = true;
      }
    }

    // 各入力フィールドのイベントリスナーを設定
    firstNameInput.addEventListener('input', function() {
      validateNameInput(firstNameInput);
    });

    lastNameInput.addEventListener('input', function() {
      validateNameInput(lastNameInput);
    });

    emailInput.addEventListener('input', updateSubmitButtonState);
    passwordInput.addEventListener('input', updateSubmitButtonState);
  });
</script>

挙動

以下のような挙動となります。