バリデーションのエラーメッセージについて。
以下にコードを載せるが、このエラー表示はLaravelのblade.php内のモーダル(入力フォーム)のヘッダーに置いている。
流れとしては、バリデーションを通過出来なかった際、blade.phpに戻り、モーダルが自動で開かれ、モーダル上部にこのエラーメッセージが表示されるという形だ。
【問題】
一度モーダルを閉じ、ボタン押下で再びモーダルが開かれたとき、この表示が残っていて邪魔なのだ。
【理想】
再度モーダルが開かれたときは、もうエラーメッセージは無くなってほしい。
blade.php
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<p>{{ $error }}</p>
@endforeach
</ul>
</div>
<script>
// ブラウザがDOMを生成後に処理を実行
document.addEventListener('DOMContentLoaded', function () {
const modalItemProperty = new bootstrap.Modal(document.getElementById('modalItemProperty'));
modalItemProperty.show();
});
</script>
@endif
【解決策】
モーダルを閉じるときに、JavaScriptでエラーメッセージのHTML要素を削除（または非表示に）する。
提供された改善案CG
@if ($errors->any())
<div id="validation-errors" class="alert alert-danger">
@foreach ($errors->all() as $error)
<p>{{ $error }}</p>
@endforeach
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const modalElement = document.getElementById('modalItemProperty');
const modalItemProperty = new bootstrap.Modal(modalElement);
// バリデーション失敗時は自動で開く
modalItemProperty.show();
// モーダルが閉じられたらエラー表示を削除
modalElement.addEventListener('hidden.bs.modal', function () {
const errorBox = document.getElementById('validation-errors');
if (errorBox) {
errorBox.remove();
}
});
});
</script>
@endif
提供された改善案Cd
@if ($errors->any())
<div class="alert alert-danger" id="validationErrors">
<ul>
@foreach ($errors->all() as $error)
<p>{{ $error }}</p>
@endforeach
</ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const modalEl = document.getElementById('modalItemProperty');
const modalItemProperty = new bootstrap.Modal(modalEl);
modalItemProperty.show();
// モーダルが「完全に閉じられた」タイミングで発火するイベント
modalEl.addEventListener('hidden.bs.modal', function () {
const errorDiv = document.getElementById('validationErrors');
if (errorDiv) {
errorDiv.remove(); // DOMからエラー要素を削除
}
});
});
</script>
@endif
hidden.bs.modal とは？
これはBootstrapのイベント。
hidden.bs.modal
は、「モーダルが完全に閉じ終わった瞬間」に発火。
つまり、
modalElement.addEventListener('hidden.bs.modal', ...)
は、「閉じたあと何かしたい」時の専用フック。