catch で取得した response.status が 422 ならバリデーションエラーになる。
その場合、response.data.errors にバリデーションエラーの文言が入っているので、ループで取り出して表示すればよい。
<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>
コメント