ゆーものメモ帳

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== axios で Laravel のバリデーションエラーを取得する方法 ======
catch で取得した response.status が 422 ならバリデーションエラーになる。\\
その場合、response.data.errors にバリデーションエラーの文言が入っているので、ループで取り出して表示すればよい。
<code>
<input type="text" name="hoge" value="{{ old('hoge', $fuga['hoge']) }}">

<!--
  #test_send_error にバリデーションエラーを表示
  d-none で最初は非表示にする
-->
<span id="test_send_error" class="text-danger small d-none"></span>

<button type="button" onclick="testSend()">テスト送信</button>

<script>
async function testSend() {
  if (!confirm("テスト送信しますか？")) {
    return
  }

  // 既にエラーが表示済みの場合は非表示にする
  $('#test_send_error').addClass('d-none')

  let formData = new FormData()
  formData.append('hoge', $('input[name=hoge]').val())

  // 10秒でタイムアウト
  await axios.post('/api/test', formData, {timeout: 10000})
  .then(res => {
    // 成功した場合の処理
  })
  .catch(e => {
    // 10秒を超えてタイムアウトした際の処理
    if (e.response == null) {
      alert('接続がタイムアウトしました。\n入力が正しいかご確認ください。')
      return
    }

    // バリデーションエラーの処理
    if (e.response.status == 422) {
      let errors = e.response.data.errors
      let mes = ''
      $.each(errors, function(key, val) {
        mes += '<i class="fas fa-exclamation-circle mr-2"></i>' + val + '<br>'
      })
      $('#test_send_error').html(mes)
      $('#test_send_error').removeClass('d-none')

    // それ以外のエラー処理
    } else {
      let mes = e.response.status + ' エラー\n'
      mes += statusText
      alert(mes)
    }
  })
}
</script>
</code>

ゆーものメモ帳

ユーザ用ツール

サイト用ツール

ページ用ツール