Laravel表单中JavaScript模态框验证：验证时保持模态框开启

核心问题分析 #

如果你的表单是传统页面刷新提交，验证失败后页面会重新加载，模态框自然会关闭——这是前端的默认行为，任何前端JS都无法阻止页面刷新后的状态丢失。你之前在CodeIgniter 3中能实现，大概率是通过后端存状态、页面加载时自动触发模态框，或者用了AJAX提交；而Laravel默认的表单提交逻辑和CI3的差异导致原有代码失效。

先排查你的现有脚本可能的错误 #

如果你的JS只是简单监听提交事件、尝试重新打开模态框，比如：

$('#password-form').on('submit', function() {
    $('#password-modal').modal('show');
});

这种写法完全无效，因为默认提交会触发页面刷新，JS代码还没执行完页面就已经重载了。正确的做法是阻止默认提交行为，改用AJAX提交表单，让页面不刷新。

推荐实现方式：AJAX异步提交表单 #

这种方式能完全避免页面刷新，模态框始终保持开启，同时实时展示验证错误。

1. 模态框表单代码（Laravel Blade） #

<div class="modal fade" id="password-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">更新密码</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="password-update-form" action="{{ route('password.update') }}" method="POST">
                    @csrf
                    @method('PUT') <!-- 密码更新用PUT方法 -->

                    <div class="form-group mb-3">
                        <label for="current_password">当前密码</label>
                        <input type="password" name="current_password" id="current_password" class="form-control">
                    </div>

                    <div class="form-group mb-3">
                        <label for="password">新密码</label>
                        <input type="password" name="password" id="password" class="form-control">
                    </div>

                    <div class="form-group mb-3">
                        <label for="password_confirmation">确认新密码</label>
                        <input type="password" name="password_confirmation" id="password_confirmation" class="form-control">
                    </div>

                    <button type="submit" class="btn btn-primary">确认更新</button>
                </form>
            </div>
        </div>
    </div>
</div>

2. AJAX提交的JavaScript代码（原生JS） #

document.getElementById('password-update-form').addEventListener('submit', function(e) {
    // 1. 阻止默认表单提交行为
    e.preventDefault();

    // 2. 清除之前的错误提示
    document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
    document.querySelectorAll('.invalid-feedback').forEach(el => el.remove());

    // 3. 收集表单数据
    const formData = new FormData(this);
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    // 4. 发送AJAX请求
    fetch(this.action, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json' // 要求后端返回JSON格式
        },
        body: formData
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            // 密码更新成功：关闭模态框、重置表单、提示成功
            document.getElementById('password-modal').classList.remove('show');
            document.querySelector('.modal-backdrop').remove();
            this.reset();
            alert('密码更新成功！');
        } else {
            // 验证失败：给错误字段添加样式和提示
            Object.keys(result.errors).forEach(field => {
                const input = document.getElementById(field);
                if (input) {
                    input.classList.add('is-invalid');
                    const errorMsg = document.createElement('div');
                    errorMsg.className = 'invalid-feedback';
                    errorMsg.textContent = result.errors[field][0];
                    input.parentNode.appendChild(errorMsg);
                }
            });
            // 模态框保持开启（无需额外操作，页面没刷新）
        }
    })
    .catch(err => {
        console.error('请求错误:', err);
        alert('更新失败，请稍后重试');
    });
});

3. Laravel控制器处理逻辑 #

确保控制器返回JSON响应，Laravel的表单验证失败会自动返回422状态码的JSON错误：

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;

public function update(Request $request)
{
    // 表单验证规则
    $validated = $request->validate([
        'current_password' => 'required|current_password',
        'password' => 'required|confirmed|min:8',
    ]);

    // 更新用户密码
    auth()->user()->update([
        'password' => Hash::make($validated['password'])
    ]);

    // 返回成功响应
    return response()->json(['success' => true]);
}

备选方案：传统提交+后端存状态（不推荐） #

如果你不想用AJAX，可以在验证失败后，通过Session存标记，页面加载时自动打开模态框：

// 控制器验证失败时
return back()->with('showPasswordModal', true)->withErrors($validator);

然后在Blade模板中添加：

<script>
    @if(session('showPasswordModal'))
        $('#password-modal').modal('show');
    @endif
</script>

这种方式会触发页面刷新，体验不如AJAX，但能满足需求。

关键注意事项 #

• 页面必须有CSRF元标签：<meta name="csrf-token" content="{{ csrf_token() }}">，否则AJAX请求会被Laravel拦截。
• 如果使用jQuery，AJAX代码可以更简洁，但原生JS兼容性更好，无需额外依赖。

内容的提问来源于stack exchange，提问作者Irfan Chaniago