モーダルでバリデーションのエラー時モーダルにエラーメッセージ表示

今回の対応について

今回laravelを使用し、モーダル画面で送信ボタンが押下された時にバリデーションチェックを行い、
モーダル画面にメッセージを表示するという事をしたく、実装を行いました。

• モーダル画面で送信を押下します。押下時はajax通信でcontrollerへ飛ばします。
• FormRequestを作成し項目名のバリデーションを追加します。
• controllerへ飛んできたときにバリデーションでひかかった場合は
  ajaxの方でfailとして受け取ります。バリデーションエラーのステータスは422です。
• ステータスが422の時にメッセージを追加するように行いました。

modal_submit.js

$(document).on('click','#form_submit',function(event) {
  var $form = $('#form');
  var id = $('#id').val();
  $form.attr('action', '{{ url('aaaa/aaaa') }}/'+ id);
  // 操作対象のフォーム要素を取得
  $.ajax({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: $form.attr('action'),
    type: $form.attr('method'),
    data: $form.serialize(),
    datatype: 'json',
  })
  .done(function(data) {
    $('#modalForm').modal('hide');
  })
  .fail(function(error) {
    console.log('失敗');
    if (error.status === 422) {
      $.each(error.responseJSON, function(id, val) {
        $('#add_task_table').after(`<span class=\"help-block has-error\"> <strong>${val}</strong></span>`);
      });
    }
  });
});

modal_submit.php

<form id="form" action="" method="post">
  <div class="modal fade confirm-dialog" id="modalForm" tabindex="-1">
    <div class="modal-dialog" style="width:40%">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"> <span>×</span> </button>
          <h4 class="modal-title">登録モーダル<h4>
        </div>
        <input id="id" type="hidden" name="project_id" value="" />
        {{ csrf_field() }}
        <div class="modal-body">
          <table class="table table-bordered doc-base-table" id="add_task_table">
            <tr>
              <th>名前</th>
              <td>{{ Form::text( 'name', old('name'), ['class' => 'form-control']) }}</td>
            </tr>
            <tr>
              <th>名前2</th>
              <td>{{ Form::text( 'name2', old('name2'), ['class' => 'form-control']) }}</td>
            </tr>
          </table>
        </div>
        <div class="modal-footer" style="border-top:none;">
          <button type="button"class="btn btn-default btn-green btn-primary" id='form_submit'>登録</button>
          <button type="button" class="btn btn-default btn-green btn-primary" data-dismiss="modal">キャンセル</button>
        </div>
      </div>
    </div>
  </div>
</form>

responseJSONのはこのように入ってきます。

{
name: ['名前は必須です']
name2: ['名前2は必須です']
}

tableタグの下の表示するようにタグの下にメッセージは表示するように追加しました。

注意
追加するだけなので閉じるときなどにエラーメッセージを消去などは行っておりません。