バリデーションとRe:ゼロ

今日は昨日の続き、しょぼい画面に立派なバリデーションを追加する。

バリデーション

メモ

フォームクラスの各フィールドにアノテーションを付ける
postメソッドの引数のフォームクラスに、@Validatedを付ける

f:id:majigomi:20190826223740p:plain

message.propertiesにメッセージを追加

例

signupForm.password=パスワード
NotBlank.signupForm.password={0}を入力してください
Length.signupForm.password={0}は、{2}桁以上、{1}桁以下で入力してください
Pattern.signupForm.password={0}は半角英数字で入力してください

f:id:majigomi:20190826225334p:plain

メッセージを個別表示するため、htmlを修正。th:if="${#fields.hasErrors('フィールド名')}" th:errors="*{フィールド名}"

f:id:majigomi:20190826231258p:plain

何故か、bootstrapのhas-error classが適用されていない(ように見える)が、とりあえず無視して進める。

バリデーションの順位を付けるため、バリデーショングループのインターフェースを追加
バリデーショングループの順は@GroupSequence({ValidGroup1.class, ValidGroup2.class, ValidGroup3.class})という感じで指定する
コントローラークラスの@Validatedでバリデーショングループ順のIFを指定する@Validated(GroupOrder.class)
フォームクラスの各アノテーションに、バリデーショングループを指定する@NotBlank(groups=ValidGroup1.class)

f:id:majigomi:20190826232801p:plain — 優先度1のエラーが優先される

f:id:majigomi:20190826232940p:plain — 優先度1のエラーがなければ2のエラーが表示される

駆け足だがバリデーションの実装まで進めた。

明日からはVue.jsの学習！

今日までに作ったこの画面を、明日からVue.jsを使ってカスタマイズしていく。
はじめは公式サイトのチュートリアルを進める予定。

jp.vuejs.org

昨日の出来事

仮面ライダージオウの最終回をリアルタイムに見るため、9時に起床。
リュウソウジャーも見終えたら時間は10時、打ちに行くしかないっしょ！

というわけでRe:ゼロに着席。
帰省したときに今更ながら初打ちしたら、白鯨攻略戦の勝率が2/2で恐怖心が弱まったので。
とはいえ流石にそろそろ負けるかな～と思ったら、さらに2回連続で完全撃破し、2,000枚ほど出玉を獲得。

f:id:majigomi:20190826220506j:plain — こんな感じの千枚超えを2連発

なんか楽しくてもうちょっと打ちたくなっちゃって、ここから一行に白鯨攻略戦に勝てなくなる。
5回ほどスルーして残り出玉が少なくなってきて、ようやくチャンスが訪れるも・・・ f:id:majigomi:20190826213716j:plain これでも勝てず・・・。
しかしこの後・・・ f:id:majigomi:20190826214248j:plain 強引に勝利を引き込む！
結果これが、 f:id:majigomi:20190826214354j:plain ここからさらに後乗せがあり・・・ f:id:majigomi:20190826214448j:plain 初の完走！これだけ純増が多いと、枚数上限で損した気分にはならないな～。