HTML表单为输入框添加required属性后，空值提交仍直接触发表单action执行

首先可以明确：在form内部嵌套任意多层div区块，完全不会破坏HTML的原生required校验能力，你遇到的校验失效，和这次新加的div结构没有任何关系。
原生校验失效的常见原因就这几个：

• 提交逻辑绕过了浏览器默认流程
  浏览器的required校验，只会在用户点击带type="submit"属性的按钮、走默认表单提交链路的时候触发。如果你在JS里给提交按钮绑了点击事件，手动调用form.submit()方法，这个API会直接跳过所有内置校验逻辑，直接触发表单跳转，你写的required自然就不起作用。
• 表单被全局关闭了原生校验
  很多开源HTML模板、UI组件库会默认给form标签加上novalidate属性，这个属性的作用是直接禁用整个表单的所有浏览器内置校验规则，哪怕你给input单独加了required，也不会触发拦截。
• 必填输入框的DOM位置不在form的有效范围内
  如果后续改代码的时候不小心把带required的input挪到了form标签的闭合范围外面，哪怕视觉上输入框还在表单区块里，也不会被纳入校验范围。

1. 先核对form标签的属性
   检查你当前的form标签，确认没有额外加上novalidate，从你贴的示例代码来看，这部分目前是合规的，可以先排除这个问题。
2. 排查页面绑定的提交相关JS
   如果你之前为了做AJAX提交，写过类似下面的代码，就会出现校验失效：

   // 错误写法：绑按钮点击事件，手动触发表单提交
   document.querySelector('.submit').addEventListener('click', () => {
     document.getElementById('feedback_form').submit()
   })
   

   正确的异步提交写法应该是监听form本身的submit事件，在事件回调里拦截默认行为——这个执行时机下，浏览器已经跑完了所有required校验，校验不通过根本不会触发submit事件，你后续的AJAX逻辑自然也不会执行：

   document.getElementById('feedback_form').addEventListener('submit', (e) => {
     // 走到这里就说明所有原生校验已经通过了
     e.preventDefault()
     // 写你的异步提交逻辑即可
   })
   

3. 校验DOM层级
   检查页面最终渲染的DOM结构，保证带required的name、email输入框都在form标签的闭合范围之内，只要在这个范围内，不管你套多少层div、label、自定义标签做布局，required校验都能正常生效。

注：你贴的示例代码本身结构没有任何问题，只要不引入上面提到的干扰逻辑，空内容提交时浏览器会直接弹出“请填写此字段”的拦截提示，不会跳转到后端接口。

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