如何使用Django提交表单信息并解决前端验证与入库冲突问题

你绑定的提交按钮点击事件中执行了preventDefault()，阻止了表单默认的提交行为，所以就算表单验证通过，数据也不会发送到Django后端，自然无法入库。删除data-kt-account-modal-action="submit"属性后，对应的JS逻辑不会触发，没有拦截默认提交动作，所以数据可以正常入库，但对应的验证、加载态交互也随之失效。

步骤1：给表单添加唯一标识 #

给你的表单标签设置id属性，方便JS选择操作，同时确保表单内已添加Django必备的{% csrf_token %}标签：

<form id="kt_account_form" method="POST">
    {% csrf_token %}
    <!-- 其余表单内容 -->
</form>

步骤2：修改JS逻辑，验证通过后主动提交表单 #

在原有JS逻辑中补充表单主动提交的代码，修改后的完整代码如下：

const i = t.querySelector('[data-kt-account-modal-action="submit"]');
// 获取表单元素
const accountForm = document.getElementById('kt_account_form');
i.addEventListener("click", (t => {
    t.preventDefault(), o && o.validate().then((function(t) {
        console.log("validated!"), "Valid" == t ? (i.setAttribute("data-kt-indicator", "on"), i.disabled = !0, setTimeout((function() {
            i.removeAttribute("data-kt-indicator"), i.disabled = !1, Swal.fire({
                text: "Form has been successfully submitted!",
                icon: "success",
                buttonsStyling: !1,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-primary"
                }
            }).then((function(t) {
                if(t.isConfirmed) {
                    n.hide();
                    // 验证通过后主动提交表单到后端
                    accountForm.submit();
                }
            }))
        }), 2e3)) : Swal.fire({
            text: "Sorry, looks like there are some errors detected, please try again.",
            icon: "error",
            buttonsStyling: !1,
            confirmButtonText: "Ok, got it!",
            customClass: {
                confirmButton: "btn btn-primary"
            }
        })
    }))
}));

可选优化：异步提交无刷新 #

如果你不需要提交后跳转页面，可以将accountForm.submit()替换为Fetch/AJAX请求，异步提交表单数据，注意请求头要携带CSRF Token：

// 异步提交示例
const formData = new FormData(accountForm);
fetch("你的Django后端接口地址", {
    method: "POST",
    body: formData,
    headers: {
        "X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value
    }
}).then(res => res.json()).then(data => {
    // 处理后端返回结果
})

注意：原有逻辑是先弹出成功提示再提交表单，如果提交后会跳转页面，成功提示会被跳转打断，你可以根据需求调整逻辑顺序，先提交拿到后端返回结果后再弹出提示、关闭模态框。

内容的提问来源于stack exchange，提问作者Rudy Ezequiel Rodríguez Pérez