【rails】deviseでのバリデーションチェックのかけ方【同期通信】

おはようございます。
今日はデバイスのバリデーションについて書いていきたいと思います。
実装後のイメージ動画はこちらになります。

実装の流れ

実装の流れは以下の①〜④になります。すごく簡単に実装することができます。
① バリデーションを定義
② エラーメッセージを表示させるようviewを編集
③ ja.ymlを編集しカラム名の日本語化
④ CSSで見た目を整える

① バリデーションを定義

下記が実際のコードです。簡略化のため実装に直接関係のない記載は省略しています。

class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable   #:validatableを削除

  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-]+(\.[a-z\d\-]+)*\.[a-z]+\z/i
  VALID_PASSWORD_REGEX = /\A(?=.*[a-z])(?=.*\d)[a-z\d]{8,}+\z/
  validates :nickname, presence: true, length: { in: 1..10 }
  validates :email, presence: true, uniqueness: true, format: { with: VALID_EMAIL_REGEX, message: "を○○@○○.○○の形式で入力して下さい" }, length: { maximum: 255 }
  validates :password, presence: true, length: { maximum: 75 }, format: { with: VALID_PASSWORD_REGEX, message: "を半角英数字8文字以上で入力して下さい" }
end

まず、deviseを導入するとデフォルトのバリデーションが自動で実装されているので、これを無効にするため:validatableを削除します。後はかけたいバリデーションを記載していきます。

VALID_EMAIL_REGEXとVALID_PASSWORD_REGEX

メールアドレスとパスワードの正規表現を記載しています。メールアドレスは○○@○○.○○の形式のとき、パスワードは半角英数字8文字以上のときのみマッチするようになっています。パスワードの正規表現についてはこちらに詳しく書いたので参考にどうぞ
https://shun-0211.hatenablog.com/entry/2020/06/03/205335

nicknameカラムのバリデーション

nicknameカラムには「空でないこと」「１文字以上８文字以下であること」のバリデーションをかけています。

emailカラムのバリデーション

emailカラムには「空でないこと」「同じメールアドレスが存在しないこと」「定義した正規表現にマッチすること」「255文字以下であること」のバリデーションをかけています。「定義した正規表現にマッチすること」のデフォルトのエラーメッセージが「不正な値です」なので、message:以下でエラーメッセージを定義しています。

passwordカラムのバリデーション

passwordカラムには「空でないこと」「75文字以下であること」「半角英数字８文字以上であること」のバリデーションをかけています。emailカラムと同じくエラーメッセージを定義し直しています。

② エラーメッセージを表示させるようviewを編集

編集したviewの一部を下記に示します。

.input__form
    = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
      .input__form__nickname
        .input__form__nickname__title
          ニックネーム
          %span.required
            必須
        .input__form__nickname__form
          = f.text_field :nickname, placeholder: "タロウ", class: "nickname__form"
      - if resource.errors.include?(:nickname)    #以下追加
        %ul.nickname__error__messages
          - resource.errors.full_messages_for(:nickname).each do |error_message| 
            %li
              = error_message

- if resource.errors.include?(:nickname)

この記述により、バリデーションチェックによりnicknameカラムにエラーメッセージがあるときのみ以下のHTMLを表示させます。この記述により、フォームのすぐ下にエラーメッセージを表示させることが可能になります。

- resource.errors.full_messages_for(:nickname).each do |error_message|

この記述により、nicknameカラムのエラーメッセージを配列に格納し、一つ一つのメッセージを表示させることができます。

③ ja.ymlを編集しカラム名の日本語化

デフォルトのままではカラム名が英語で表示されるため、ja.ymlを編集します。日本語化するのに必要な処理は省略しています。詳しくは下記の記事をご覧ください。

ja:
  activerecord:
    models:
      user: ユーザー
    attributes:
      user:
        nickname: ニックネーム
        email: メールアドレス
        password: パスワード

④ CSSで見た目を整える

最後にCSSで見た目を整えます。

.email__error__messages{
   font-size: 14px;
   color: red;
   padding-bottom: 10px;
}

基本的には以上で実装は終わりですが、一点だけ注意点です。
バリデーションエラーが出る状態で送信ボタンを押し画面遷移するとviewが崩れる場合があります。これはエラー時にinputタグをfield_with_errorsのクラス名を持ったdivタグで囲う仕様になっているからです。これにより、viewが崩れる場合があります。ので、整えてあげる必要がある場合があるのでご注意を。

終わり！

以上になります。ここまで読んでくださり、ありがとうございました。分かりにくいやアドバイス等ありましたらコメントくださると幸いです。では！