フォームに全角で入力したメールアドレスを半角のものに正規化する機能を実装して確認してみたところ、ブラウザ側のバリデーション機能が先に作動して画像のようになりました。
今回ブラウザ側のバリデーションは不要なので、
ビューファイルのフォーム（form_with）にブラウザ側のバリデーションを無効にする設定（novalidate）を記載しました。
<%= form_with model: @staff_member, html: { novalidate: true }, url: [ :admin, @staff_member ] do |f| %>
novalidateの設定を書き加えることでブラウザによるバリデーションを無効にするそうです。
バリデーションのエラーの表示をオリジナルのものにしたい場合に有効かもしれません。
ちなみに上記の内容はとあるRailsの書籍で紹介されていた正規化表現の項目を学習中に遭遇した出来事なのですが、サンプルコードにnovalidateの部分の記載はなく、ブラウザのバリデーションについても言及が無かったので他の読者の方がどのよう対応されているのか気になるところです。