Laravel 9中关闭Bootstrap模态框后重置验证消息的方法

问题场景 #

使用Bootstrap模态框搭配jQuery Validate插件做表单验证时，提交表单触发验证后关闭模态框，再次打开时之前的验证错误提示和输入框的is-invalid样式仍然存在，影响用户体验。

解决方法 #

通过监听Bootstrap模态框的hidden.bs.modal事件，在模态框完全关闭时执行以下操作：

• 重置表单的验证状态（使用jQuery Validate的resetForm()方法）
• 清空表单所有输入框的值
• 手动移除所有输入框的is-invalid类
• 移除所有错误提示元素（.invalid-feedback）

修改后的完整JavaScript代码 #

$(document).ready(function() {         
    // 初始化表单验证
    $('#addForm').validate({
        rules: {
            name: {
                required: true,
            },
            mobile_no: {
                required: true,
            },
            address: {
                required: true,
            },
            email_address: {
                required: true,
            },
        },
        messages: {
            name: {
                required: '请输入供应商名称',
            },
            mobile_no: {
                required: '请输入供应商手机号',
            },
            address: {
                required: '请输入供应商地址',
            },
            email_address: {
                required: '请输入供应商邮箱',
            },
        },
        errorElement: 'span',
        errorPlacement: function(error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
        },
        highlight: function(element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        },
    });

    // 监听模态框关闭事件，重置表单和验证状态
    $('#exampleModal').on('hidden.bs.modal', function () {
        var form = $('#addForm');
        // 重置验证状态
        form.validate().resetForm();
        // 清空输入框
        form[0].reset();
        // 移除所有输入框的is-invalid类
        form.find('.form-control').removeClass('is-invalid');
        // 移除所有错误提示
        form.find('.invalid-feedback').remove();
    });
});

说明 #

• hidden.bs.modal是Bootstrap模态框完全关闭后触发的事件，确保操作在模态框关闭后执行
• resetForm()是jQuery Validate提供的方法，用于重置表单的验证状态
• 额外手动清空输入框和移除样式、错误提示，是为了确保表单完全恢复初始状态

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