如何在表单验证通过后加载Bootstrap模态框并完成数据提交？

1. 前端修改：表单验证后再触发模态框 #

首先移除按钮原生的Bootstrap模态框触发属性，改用JavaScript先完成表单验证，通过后再手动打开模态框；同时给模态框的确认按钮添加条款勾选检查逻辑。

修改后的individual_account.html关键代码如下：

<form method="post" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" id="individualForm">
    {% csrf_token %} 
    {% for hidden_field in form.hidden_fields %} 
        {{ hidden_field.errors }} 
        {{ hidden_field }} 
    {% endfor %}
    <!-- 原有表单字段部分保持不变 -->
    
    <!-- 替换原触发按钮，移除data-bs属性 -->
    <button type="button" class="bg-yellow-700 text-white rounded-none hover:bg-white hover:text-blue-900 hover:border-blue-900 shadow hover:shadow-lg py-2 px-4 border border-gray-900 hover:border-transparent" id="submitBtn">
        Create Account
    </button>

    <!-- 模态框结构保持，修改确认按钮的id -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Terms & Conditions</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Terms & Conditions Here!!</p>
                    <label><input type="checkbox" id="acceptTerms"> I accept the terms and conditions</label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="confirmSubmit">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加JavaScript逻辑 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('individualForm');
            const submitBtn = document.getElementById('submitBtn');
            const confirmSubmitBtn = document.getElementById('confirmSubmit');
            const acceptTerms = document.getElementById('acceptTerms');
            const termsModal = new bootstrap.Modal(document.getElementById('exampleModal'));

            // 点击创建账户按钮：先验证表单
            submitBtn.addEventListener('click', function() {
                if (form.checkValidity()) {
                    // 表单验证通过，显示条款模态框
                    termsModal.show();
                } else {
                    // 验证失败，触发浏览器原生错误提示
                    form.reportValidity();
                }
            });

            // 点击模态框确认按钮：检查条款勾选状态
            confirmSubmitBtn.addEventListener('click', function() {
                if (acceptTerms.checked) {
                    // 已勾选条款，提交表单
                    form.submit();
                    termsModal.hide();
                } else {
                    alert('请先接受条款与条件');
                }
            });
        });
    </script>
</form>

2. 后端验证保持不变 #

你的views.py代码已经实现了后端表单验证逻辑，这部分无需修改——前端验证可被绕过，后端必须再次校验表单有效性，确保数据安全。

关键说明 #

• 前端使用HTML5原生的checkValidity()和reportValidity()方法完成基础验证，Django必填字段会自动渲染required属性，无需额外配置。
• 通过Bootstrap的Modal API手动控制模态框的显示/隐藏，避免原生属性直接触发。
• 条款勾选检查放在模态框确认环节，确保只有同意条款的用户才能提交表单。

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