JetStreamのRegisterエラーの修正

JetStreamでユーザー登録時に、不正なメールアドレスを入力したら、データベースに登録されて、その後にエラーメッセージが表示されるという不可解の現象にあってしまいました。

ユーザー登録

1．不正メールアドレスの入力

ユーザー登録時に、メールアドレスの . (ドット）以下のドメインを入力忘れて登録ボタンをクリックしました。

2．エラー表示

下記のようなエラーがいきなり表示されました。

3．DB確認

不思議に思って、DBを確認したところ、不正なメールアドレスのままユーザーは登録されていました。

4．JetStreamのバグ？

普通emailチェックは、文字列＠文字列.ドメインの形式でないと登録されないようにバリデーションチェックされるはずですが、バリデーションで引っかからずに登録後にエラー表示されました。

Javascriptでバリデーション

JetStreamの構造を調べて修正するのは面倒なので、JavaScriptでDBにデータ送信する前にバリデーションチェックをするようにしました。

1．フォームにIDを追加

まず、JavaScriptでフォームを特定できるように、フォームタグにIDを追加します。

<form method="POST" action="{{ route('register') }}" id="registration-form">
    {{-- その他のフォーム要素 --}}
</form>

2．JavaScriptコードを追加

次に、フォーム送信時にメールアドレスのバリデーションを行うJavaScriptのコードをページの最後（ </body> タグの前）に追加します。

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('registration-form');
        const emailInput = document.getElementById('email');
        
        form.addEventListener('submit', function (e) {
            if (!emailInput.value.match(/^.+@.+\..+$/)) {
                alert('無効なメールアドレスです。');
                e.preventDefault(); // フォームの送信を防止
            }
        });
    });
</script>

3．メールアドレス入力フィールドにIDを追加

<x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autocomplete="username" />

4．動作確認

再度、不正はメールアドレスで登録処理を行ってみます。

上記のようにきちんと動作すればOKです。

尚、今回のエラーが、JetStreamのバグなら早く治してほしいですね。