Bootstrap模态框表单验证后提交关闭功能实现问题咨询

问题根源梳理 #

• 核心ID不匹配：JS代码绑定的表单ID是#contact-form，但实际表单ID是#formAwesome，导致submit事件根本没触发，表单走默认提交逻辑刷新页面，所以模态框不会消失
• 表单字段缺少name属性：现有input只有id没有name，serialize()方法无法正常序列化表单数据，校验逻辑里的[name='your_name']选择器也完全找不到对应元素
• 缺少模态框自动触发显示的逻辑
• 提交成功后没有关闭模态框、也没有存储提交状态的逻辑，会重复弹出
• 尝试的关闭方案都使用了和实际模态框ID#formModal不匹配的选择器，所以无效

修复后的完整实现代码 #

1. 模态框HTML（补充name属性、禁止跳过提交的配置） #

<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="formModalLabel">Services Contact Form</h3>
                <!-- 移除右上角关闭按钮，避免用户跳过表单提交 -->
            </div>
            <form id="formAwesome">
                <div class="modal-body">
                    <!-- 提示信息容器 -->
                    <div class="response_msg"></div>
                    <div class="form-group row">
                        <label for="firstName" class="col-sm-6 col-form-label">
                            First name
                        </label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="firstName" id="firstName" placeholder="John" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="lastName" class="col-sm-6 col-form-label">
                            Last name
                        </label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="lastName" id="lastName" placeholder="Doe" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="email" class="col-sm-6 col-form-label">
                            E-mail address
                        </label>
                        <div class="col-sm-6">
                            <input type="email" class="form-control" name="email" id="email" placeholder="john.doe@email.com" required>
                        </div>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="consent" value="1" id="awesomeCheck" required>
                        <label class="form-check-label" for="awesomeCheck">
                            Yes, I consent to contact.
                        </label>
                    </div>
                    <!-- 加载动画 -->
                    <img id="loading-img" src="你的加载图本地地址" alt="提交中">
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

新增的data-backdrop="static" data-keyboard="false"配置可以禁止用户点击空白区域、按ESC键关闭模态框，强制必须完成提交才能访问页面内容。

2. CSS代码（保持原有逻辑不变） #

<style> 
#loading-img{
display:none;
}

.response_msg{
margin-top:10px;
font-size:13px;
background:#E5D669;
color:#ffffff;
width:250px;
max-width:100%;
padding:3px;
display:none;
}
</style>

3. 修复后的JS逻辑 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 请确保已经引入bootstrap的modal依赖JS，未引入的话补充对应本地路径即可 -->
<script> 
$(document).ready(function(){
    // 先判断用户是否已经提交过表单，已提交就不再弹出模态框
    if(!localStorage.getItem('formSubmitted')){
        $('#formModal').modal('show');
    }

    // 绑定正确的表单ID
    $("#formAwesome").on("submit",function(e){
        e.preventDefault();
        let valid = true;
        // 校验名字
        if($("#firstName").val() === ''){
            $("#firstName").css("border","1px solid red");
            valid = false;
        }
        // 校验姓氏
        if($("#lastName").val() === ''){
            $("#lastName").css("border","1px solid red");
            valid = false;
        }
        // 校验邮箱
        if($("#email").val() === ''){
            $("#email").css("border","1px solid red");
            valid = false;
        }
        // 校验同意协议勾选状态
        if(!$("#awesomeCheck").is(':checked')){
            $("#awesomeCheck").css("outline","1px solid red");
            valid = false;
        }
        // 校验不通过直接终止流程
        if(!valid) return;

        // 校验通过走提交逻辑
        $("#loading-img").css("display","block");
        var sendData = $( this ).serialize();
        $.ajax({
            type: "POST",
            url: "get_response.php",
            data: sendData,
            success: function(data){
                $("#loading-img").css("display","none");
                $(".response_msg").text(data);
                $(".response_msg").slideDown().fadeOut(3000);
                $("#formAwesome").find("input[type=text], input[type=email]").val("");
                $("#awesomeCheck").prop("checked",false);
                // 提交成功关闭模态框
                $('#formModal').modal('hide');
                // 存储提交状态，后续打开页面不会再弹出
                localStorage.setItem('formSubmitted','1');
            }
        });
    });

    // 输入框失焦移除错误样式
    $("#formAwesome input").blur(function(){
        if($(this).val() != '' || $(this).is(':checked')){
            $(this).css("border","1px solid #eeeeee").css("outline","none");
        }
    });
});
</script>

补充说明 #

如果需要测试重置提交状态，在浏览器控制台执行localStorage.removeItem('formSubmitted')即可清除提交记录，重新触发模态框弹出。如果需要跨设备记住用户提交状态，可以将提交标识同步存储到后端用户关联数据中。

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