Laravel中如何在提交表单遇错误时保持Modal弹窗不关闭？

方案一：服务器端判断（无需修改表单提交方式） #

Laravel验证失败时会将错误信息闪存到Session并返回原页面，我们只需在页面加载时判断是否存在验证错误，若存在则自动打开Modal弹窗。

修改视图代码 #

在页面底部（确保在Modal切换的JavaScript之后）添加以下脚本：

// 页面加载完成后检查验证错误，存在则打开Modal
document.addEventListener('DOMContentLoaded', function() {
    const hasErrors = {{ $errors->any() ? 'true' : 'false' }};
    if (hasErrors) {
        const modal = document.getElementById('modal-box');
        openModal(modal);
        // 回填用户之前输入的内容，避免重复输入
        document.getElementById('name').value = "{{ old('name') }}";
    }
});

说明 #

• $errors->any() 是Laravel全局变量，用于判断是否存在验证错误
• old('name') 可恢复用户之前输入的内容，优化交互体验

方案二：AJAX异步提交（更流畅的用户体验） #

通过AJAX提交表单，避免页面刷新，后端验证失败时直接在前端显示错误，Modal始终保持打开状态。

步骤1：修改表单提交事件 #

更新Modal切换的JavaScript，添加表单提交监听：

// 获取表单元素
const createYearForm = document.querySelector('#modal-box form');

// 监听表单提交，阻止默认刷新行为
createYearForm.addEventListener('submit', function(e) {
    e.preventDefault();

    // 收集表单数据
    const formData = new FormData(this);

    // 发送AJAX请求
    fetch(this.action, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 成功时关闭Modal并跳转
            closeModal(document.getElementById('modal-box'));
            window.location.href = data.redirect_url;
        } else {
            // 清除旧错误提示
            const existingError = document.querySelector('.form-group .error');
            if (existingError) existingError.remove();
            // 显示新错误信息
            if (data.errors.name) {
                const errorElement = document.createElement('p');
                errorElement.className = 'error danger';
                errorElement.textContent = data.errors.name;
                document.querySelector('.form-group').appendChild(errorElement);
            }
        }
    })
    .catch(error => console.error('请求出错:', error));
});

步骤2：修改控制器代码 #

让控制器在验证失败时返回JSON格式错误，成功时返回跳转链接：

use Illuminate\Support\Facades\Validator;

public function CreateYear(Request $request)
{
    $validator = Validator::make($request->all(), [
        'name' => 'required|unique:academic_years,name'
    ]);

    if ($validator->fails()) {
        return response()->json([
            'success' => false,
            'errors' => $validator->errors()
        ], 422);
    }

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

    return response()->json([
        'success' => true,
        'redirect_url' => route('view.year'),
        'message' => 'Academic Year Created Successfully!'
    ]);
}

内容的提问来源于stack exchange，提问作者Kiran Khanal