ラジオボタンのバリデーションエラー時の値の保持で悩んだ話

背景

今回の共同開発においてラジオボタンを実装をする必要があったがラジオボタンを実装した経験がなくどのようにするのがわからず苦労したのでそのことについてまとめていく。

仕様

• カテゴリーは「Laravel」「PHP」「Docker」「web基礎」とする。
• バリデーションがエラーになった場合は画面をリダイレクトする。
• この際に値を保持する。（これに悩まされた。）

ラジオボタンについて

サンプルコード

<input type="radio" name="example" value="サンプル">サンプル

※<label>を用いれば丸い箇所だけではなく、文字の部分をクリックしても選択することができる。
この場合<input>にidを、<label>にforを用いてお互いを同じ名前で紐付けしておく必要がある。

type="radio" ・・・　radioを指定すると作成できる。
name=" " ・・・　複数のラジオボタンを作成する場合同じ名前にすると他の部分を選択したときに自動的に選択が解除される。
value= " "　・・・　選択されているときに送信される内容。必須。
checked ・・・　この属性が指定されたラジオボタンは最初から選択された状態になる。（グループの中で一つだけ）

実際のコード

create.php

<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="category_id" id="category1" value="1" {{ old('category_id') == 1 ? 'checked' : '' }}/>
    <label class="form-check-label" for="category1">Laravel</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="category_id" id="category2" value="2" {{ old('category_id') == 2 ? 'checked' : '' }}/>
    <label class="form-check-label" for="category2">PHP</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="category_id" id="category3" value="3" {{ old('category_id') == 3 ? 'checked' : '' }}/>
    <label class="form-check-label" for="category3">Docker</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="category_id" id="category4" value="4" {{ old('category_id') == 4 ? 'checked' : '' }}/>
    <label class="form-check-label" for="category4">web基礎</label>
</div>

バリデーションエラー時の値の保持

Laravelにおいてバリデーションエラー時の値の保持はグローバルヘルパ関数のoldを用いることで利用できる。

 <input type="text" name="title" value="{ old('フォームのキー名')}"

この場合ではold('title')とすれば入力されたタイトルが保持される。
ここまではわかっていたがラジオボタンの場合どうやって値を保持するのかがわからなく苦戦。最終的には三項演算子を用いるという答えにたどり着いた。

三項演算子とは

条件式　？ 真の場合　： 偽の場合

条件式を評価してその答えが真であれば真の場合の式を返し、偽の場合は偽の場合の式を返す。

例

example.php

<?php
  $var = 100;
  $str = ($var % 10 === 0) ? 10の倍数である : 10の倍数でない;
  echo $var."は".$srt;
 
 ///結果）１００は１０の倍数である
 ?>

つまりはIF文と同じだが、IF文と違って一文でまとめられてスッキリしており、加えて上記のように変数に代入することもできるメリットが有る。

実際に使ってみた

 <input class="form-check-input" type="radio" name="category_id" id="category1"　value="1" {{ old('category_id') == 1 ? 'checked' : '' }}/>

ざっくりと表すと

{{ category_idが選択されているかいないか比較 ？ checked : なにも選択しない　}}

ということになる。三項演算子ってこういう風に使うのかと感動。

参考