如何防止模态框在 Laravel 中提交时消失？

Question

我有一个 Laravel 应用程序，在视图页面上有一个模式框，允许用户向数据库添加数据。默认情况下，当用户点击提交按钮，后台返回错误时，模态框消失。我想在发生错误时保持模态框可见。我怎样才能做到这一点？

触发模态框的按钮

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

我的模态框

<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>

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");
}

我的控制器

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);
}

Answer 1

在您的表单中，您可以添加一个带有模态 ID 的隐藏输入。在您的控制器中提交时，您将获得 id 并将其以变量形式返回并返回。当返回视图时，你检查这个变量是否存在，如果是，你调用相应的模式打开：

<input type="hidden" name="activeModal" value="modal-box">

然后在您视图的某处添加：

@isset($activeModal)
    <script> 
       let modal = document.querySelector({{ $activeModal }});
       openModal(modal);
    </script>
@endisset