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>
コメント