Django 3.2中如何在JavaScript提交表单前等待并检查自动验证结果

这个问题我之前开发动态表单时也碰到过，核心原因是你直接通过按钮的click事件手动调用myform.submit()，绕过了浏览器的原生表单验证流程——而你之前看到的友好提示，其实是Django生成表单时自动添加的HTML5验证规则（比如required属性、输入类型校验）触发的浏览器原生提示，并非Django后端直接做的前端验证。当你手动调用submit()时，浏览器不会自动执行这些验证，导致提示刚闪现就被提交操作覆盖。

下面给你两个靠谱的解决方案，都能复用Django表单自带的验证规则，不用自己从零写JS验证：

方案一：监听表单的submit事件（推荐） #

表单的submit事件会在浏览器完成原生验证之后才触发，完美契合你的需求——先让浏览器做完验证，再执行你的层级信息保存逻辑，最后提交表单。

修改后的代码：

document.addEventListener("DOMContentLoaded", function(){
 appendInnerSearchQuery(document.querySelector('.hierarchical_search'), 0, rootGroup);
 var myform = document.getElementById("hierarchical_search_form");

 // 监听表单的submit事件，而非按钮的click事件
 myform.addEventListener("submit", function (e) {
   // 先阻止默认提交行为，避免提前提交
   e.preventDefault();
   // 执行你的层级信息保存逻辑
   saveSearchQueryHierarchy(document.querySelector('.hierarchical_search'));
   // 验证已通过，手动提交表单
   this.submit();
 });
});
console.log("Ready with rootGroup: ", rootGroup);

方案二：手动触发表单验证（适合必须监听按钮点击的场景） #

如果因为某些原因必须监听按钮的click事件，可以用浏览器原生的checkValidity()方法手动触发验证，它会返回布尔值表示表单是否有效，同时自动弹出验证提示；如果验证不通过，调用reportValidity()确保提示能正常显示。

修改后的代码：

document.addEventListener("DOMContentLoaded", function(){
 appendInnerSearchQuery(document.querySelector('.hierarchical_search'), 0, rootGroup);
 var myform = document.getElementById("hierarchical_search_form");
 document.getElementById("advanced_search_submit").addEventListener("click", function () {
   // 手动触发表单验证，检查是否有效
   if (myform.checkValidity()) {
     // 验证通过，保存层级信息
     saveSearchQueryHierarchy(document.querySelector('.hierarchical_search'));
     // 提交表单
     myform.submit();
   } else {
     // 验证不通过，强制显示浏览器的验证提示
     myform.reportValidity();
   }
 });
});
console.log("Ready with rootGroup: ", rootGroup);

补充说明 #

要注意的是：

• 上述方案都是复用浏览器的HTML5原生验证，这是Django表单生成时自动为字段添加的（比如required、email类型等）；
• 后端的Django表单验证依然会正常执行，前端验证只是提升用户体验，不会影响后端的安全校验，不用担心恶意绕过前端验证的问题。

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