Saya mempunyai aplikasi Laravel yang mempunyai kotak modal pada halaman paparan yang membolehkan pengguna menambah data ke pangkalan data. Secara lalai, modal hilang apabila pengguna mengklik butang hantar dan bahagian belakang mengembalikan ralat. Saya mahu memastikan kotak modal kelihatan apabila ralat berlaku. Bagaimanakah saya boleh mencapai matlamat ini?

Butang yang mencetuskan modal

<div><button class="add" data-modal-target="#modal-box">Add New Year</button></div>

Modal saya

<div class="modal-box" id="modal-box">
    <div class="modal-header">
        <div class="title"><h1>Create School Year</h1></div>
        <div data-close-button class="modal-close-btn">
            <span class="material-symbols-sharp">close</span> 
        </div>   
    </div>
    <hr>
    <div class="modal-body">
        <form action="{{ route('create.year') }}" method="post">
            @csrf
            <div class="input-form">
                <div class="form-group">
                    <h3>School Year <span class="danger">*</span></h3>
                    <input type="text" name="name" id="name">
                    @error('name')
                        <p class="error danger">{{ $message }}</p>
                    @enderror    
                </div>
                <div>
                    <button type="submit" class="create">Create Year</button>
                </div> 
            </div>
        </form>    
    </div>
</div>

kotak modal suis JavaScript

const openModalButtons = document.querySelectorAll("[data-modal-target]");
const closeModalButtons = document.querySelectorAll("[data-close-button]");
const overlay = document.getElementById("overlay");

openModalButtons.forEach((button) => {
  button.addEventListener("click", () => {
    const modal = document.querySelector(button.dataset.modalTarget);
    openModal(modal);
  });
});

closeModalButtons.forEach((button) => {
  button.addEventListener("click", () => {
    const modal = button.closest(".modal-box");
    closeModal(modal);
  });
});

overlay.addEventListener("click", () => {
  const modals = document.querySelectorAll(".modal-box.active");
  modals.forEach((modal) => {
    closeModal(modal);
  });
});

function openModal(modal) {
  if (modal == null) return;
  modal.classList.add("active");
  overlay.classList.add("active");
}

function closeModal(modal) {
  if (modal == null) return;
  modal.classList.remove("active");
  overlay.classList.remove("active");
}

Pengawal Saya

public function CreateYear(Request $request)
{
    $validateData = $request->validate([
        'name' => 'required|unique:academic_years,name'
    ]);

    $data = new AcademicYear();
    $data->name = $request->name;
    $data->save();

    $notification = array(
        'message' => 'Academic Year Created Successfully!',
        'alert-type' => 'success'
    );

    return redirect()->route('view.year')->with($notification);
}