WordPress页面双表单提交校验冲突问题求助

这一问题由同页面多表单的识别范围、验证逻辑冲突导致，按以下优先级操作即可修复：

• 排查表单嵌套错误
  打开浏览器开发者工具的元素面板，确认两个<form>标签完全独立、无嵌套、无未闭合的标签。只要存在表单嵌套，浏览器会默认将两个表单的字段归为同一校验范围，提交任意一个都会触发全部必填项校验。
• 绑定提交按钮与对应表单的关联关系
  给两个表单分别设置唯一的id属性，再给对应表单内的提交按钮添加form属性关联对应表单ID，强制浏览器明确提交按钮所属的表单范围，示例代码如下：

  <!-- 顶部表单 -->
  <form id="form-top" method="post">
    <!-- 顶部表单字段内容 -->
    <input type="submit" value="提交顶部表单" form="form-top">
  </form>
  
  <!-- 底部Remote Collector Update表单 -->
  <form id="form-remote" method="post">
    <!-- 底部表单字段内容 -->
    <input type="submit" value="提交底部表单" form="form-remote">
  </form>
  

• 关闭全局HTML5默认验证，改用局部校验
  给两个<form>标签都添加novalidate属性，关闭浏览器自带的全局必填项校验规则。如果是使用Contact Form 7、Gravity Forms等WordPress表单插件生成的表单，插件会自动匹配当前提交的表单做局部校验，不会跨表单验证字段；如果是自定义开发的表单，修改校验逻辑为仅选中当前提交的表单内的必填字段做校验，不要全局查询页面所有带required属性的字段。
• 排查重复字段名
  确认两个表单内的输入字段name属性没有完全重复的情况，避免提交时后台或者前端校验逻辑混淆字段所属的表单。

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