添加required属性后HTML表单仍可无信息提交问题求助

你的表单验证失效有两个核心原因：

• 提交按钮里嵌套了<a>标签，点击时会直接触发链接跳转，完全绕过了表单的提交流程，HTML5自带的验证逻辑根本没机会执行。
• 下拉框<select>没有设置空值的默认选项，浏览器会默认选中第一个有值的选项，导致required规则形同虚设。

解决方案 #

1. 移除按钮内的<a>标签，改用原生提交按钮
   把原来的按钮代码：

   <button class="btn--form">
     <a href="#" class="btn">Sign Up Now</a>
   </button>
   

   修改为：

   <button type="submit" class="btn--form btn">Sign Up Now</button>
   

   直接将样式类绑定到<button>上，确保点击时触发表单的submit事件，触发内置验证。

2. 给<select>添加空值默认选项
   修改下拉框代码，增加一个无值的提示选项，强制用户主动选择有效内容：

   <select id="select" required>
     <option value="" selected disabled>请选择来源</option>
     <option value="facebook">Facebook</option>
     <option value="google">Google</option>
     <option value="friendsandfamily">Friends and Family</option>
     <option value="youtube">Youtube</option>
     <option value="Podcast">Podcast</option>
   </select>
   

   disabled属性防止用户选中该选项，selected让页面加载时默认显示提示文本，确保required规则生效。

修改后的完整表单代码 #

<form class="form" action="#">
   <div>
      <div class="labels">
         <label for="full-name">Full Name</label>
      </div>
      <input
         id="full-name"
         type="text"
         placeholder="John Smith"
         required
         />
   </div>
   <div>
      <div class="labels">
         <label for="email-address">Email Address</label>
      </div>
      <input
         id="email-address"
         type="email"
         placeholder="Johnsmith@example.com"
         required
         />
   </div>
   <div>
      <div class="labels">
         <label for="select">Where did you hear about us? </label>
      </div>
      <select id="select" required>
         <option value="" selected disabled>请选择来源</option>
         <option value="facebook">Facebook</option>
         <option value="google">Google</option>
         <option value="friendsandfamily">Friends and Family</option>
         <option value="youtube">Youtube</option>
         <option value="Podcast">Podcast</option>
      </select>
   </div>
    <button type="submit" class="btn--form btn">Sign Up Now</button>
</form>

修改后，点击提交按钮时浏览器会自动检查所有必填字段，未填写或未选择时会弹出原生验证提示，阻止表单提交。

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