Laravel5.5にて、戻るボタン押下時は必須入力を要求しない方法

Question

お世話になっております。
当方Laravel5.5にてWebSiteを構築しております、
環境はmac OS Mojave10.14.2
ブラウザはGoogle Chrome バージョン: 71.0.3578.98になります。

やりたいこと

サイトのユーザーのプロフィールを表示編集する機能があり、
プロフィールの編集画面にて、入力項目に対してviewでrequiredを付与しています。
編集画面には戻る(「マイプロフィールへ」)ボタンと確認ボタンがあり、
戻るボタン押下時には必須入力は要求されないようにしたいのですが、
どのように実装すればよいでしょうか。
view側でrequiredではなく、controllerにて必須入力をチェックするしかないでしょうか。

現状

入力項目が空白のまま、プロフィールの編集画面にて、「マイプロフィールへ」を
押下すると同時に、「必須入力です」の注意が項目に表示されます。

編集画面のview

 @section('content')
 <form action="{{ route('edit_myprof_confirm') }}" method="post">
   {{ csrf_field() }}

<table class="span_upload">
  <tr>
    <th>項目A<div class="badge badge-dark float-right">必須</div></th>
      <td><textarea name="a" class="w-50" type="text" rows="1" required>{{ old('a') }}</textarea></td>
  </tr>
  <tr>
    <th>項目B<div class="badge badge-dark float-right">必須</div></th>
     <td><textarea rows="5" name="b" required>{{ old('b') }}</textarea></td>
  </tr>
</table>

@endsection

@section('button')
 @component('common.btn_two_component')
  @slot('btn_left')
   マイプロフィールへ
  @endslot

  @slot('btn_right')
   確認
  @endslot

 @endcomponent
 </form>
@endsection

ボタンコンポーネント

<div class="col-6 both-side-padding">
  <div class="button_wrapper_left">
    <button type="submit" name="action" value="back" class="btn-outline-success btn btn_flat">
      {{$btn_left}}
    </button>
  </div>
</div>
<div class="col-6 both-side-padding">
  <div class="button_wrapper_right">
    <button type="submit" name="action" value="submit" class="btn-outline-success btn btn_flat">
      {{$btn_right}}
    </button>
  </div>
</div>

宜しくお願い致します。
お世話になっております。

Answer 1

今のコードだけ見ると、戻るボタンはtype=submitで<form action="{{ route('edit_myprof_confirm') }}" method="post">
の中に居るので、仮にrequiredを外したところで戻れなさそうに見えますね・・・？

入力フォーム系（<input>とか）のタグに付けるrequiredは
それが属する<form>が送信される前に入力有無のチェックがされることになります。
なので、requiredを持つタグが属する<form>を送信せずに戻れる仕様へ変更すべきかと思います。

例えば
戻るボタンを、type=buttonに変更して、ページ移動の処理は別途書くとか、
戻るボタンを、別のformに設置するとか（※<form>タグは入れ子にしないように注意してくださいね）、、、

それと、質問の主旨とはちょっと違いますが。

view側のrequiredもいいのですが、コントローラー側での入力チェックも大切です。
勝手にrequiredを削除して送信するような、悪意あるユーザが現れるかもしれませんしね^^;

---

コメント見ましたので、追記いたします。

仮に画面に下記の4つがあるとして、

1.マイプロフィール
2.マイプロフィール編集：入力（戻るボタン・進むボタン）
3.マイプロフィール編集：確認（戻るボタン・進むボタン）
4.マイプロフィール編集：完了

コントローラーの中で分岐、・・ということは、例えば
2の画面上で戻るボタンを押した場合、3の処理で、action=backなら1にリダイレクトさせている・・という感じなのでしょうか？

先ほど調べていて見つけたのですが、requiredは、button=submitを押したときにしか、チェックされないようなので（私も今日知りました・・^^;回答しておきながらすみません・・）、
一番早い解決方法は、やはり戻るボタンは、type=buttonに変更して、onclickに$(this).parents('form').submit();とか書いてしまう方法かもです。。。（jqueryが使えないなら、formに名前でもつけてjavascriptで）

この場合、actionには値がPOSTされませんので、それを分岐の条件にすれば良いかなと。
（あくまで一番早い解決策であって、良い策とは言いませんが）

=========================================================

確認画面→完了画面の際は、戻るもsubmitでないとold inputを取得できない

こういう実装方法を取ったことが無いので、どういう状況からそう判断されたのか分かりませんが、
明示的にリダイレクトさせた先で、渡された値も引き継ぎたい場合は、そうできるように指定してリダイレクトさせるのが正しいと思います。（ボタンが変わっただけで取得できないのでは困るので）

return redirect('リダイレクト先')->withInput();

そもそものお話をすると、（私の考えですが、）
「入力画面」の「戻る」機能は、「戻りたいURLへのリンク」で充分だと思いますし、
「確認画面」から「入力画面」へ「戻る」時も、一度「完了画面にPOSTしてから入力画面にリダイレクト」ではなく、直接「入力画面にPOSTする」方が単純で簡潔ですよね？

今の状態は、どうにもボタン部分をcomponentで使いたいがゆえに、プログラム側が複雑になってしまっているようにしか見えないので、本末転倒というかなんというか・・・といった印象です^^;

「どこからどこまでをコンポーネント化し、処理をどう分けるか」

は、「それによってプログラム側が複雑化しない」ことも、判断材料のひとつにすると良いかもしれません。

Comments

[gobindar]

mix-peach様
ご回答有難うございます。
現在のコーディングでは、Controllerにて、valueがbackかsubmitなのかで
分岐させております。

質問に記載させていただきましたボタンのコンポーネントは、
戻る・進むのある全ての画面で使用を想定していて、
確認画面→完了画面の際は、
戻るもsubmitでないとold inputを取得できないと思っているのですが、
正しいでしょうか？

もしそうだとしたら、下記3つのうちどれかになる、という認識で正しいでしょうか・・・？
1.確認画面→完了画面のボタンと、入力画面→確認画面のボタンは別々に作成する
(確認画面→完了画面は両方submitでいいが、入力→確認画面は戻るボタンをtype=buttonにする)
2.戻るボタンは別のformにする
3.ボタンは両方submitのままとし、viewでのrequiredは撤廃し、一律でController側で処理する

当方完全初心者のため、こういった場合に
「どこからどこまでをコンポーネント化し、処理をどう分けるか」
に判断がつかず、なかなか難しいところです、、、