React 中表单 required 属性未生效，根本原因是按钮同时绑定了 onClick={handleSubmit} 和表单的 onSubmit，导致点击按钮绕过原生表单验证直接触发提交逻辑。

html 表单的 required 属性仅在**原生表单提交行为**（即通过 `

` 触发）中生效；一旦为提交按钮额外添加 onclick 事件并调用相同处理函数，就会跳过浏览器内置校验，使 required 失效。

在你的 Register.jsx 中，问题出在这行代码：

<button className='btn' onClick={handleSubmit}>Cadastrar</button>

虽然 <form onSubmit={handleSubmit}> 已正确绑定，但按钮的 onClick 会立即执行 handleSubmit，此时 e.preventDefault() 虽能阻止页面刷新，却也提前中断了浏览器对 <input required> 的自动校验流程——浏览器根本没机会弹出“请填写此字段”提示，也不会阻止表单提交。

✅ 正确做法是：移除按钮上的 onClick，仅依赖 <form onSubmit> 触发验证与处理。修改后按钮应为：

<button type="submit" className="btn">Cadastrar</button>

? 补充说明：显式设置 type="submit"（虽为默认值）可增强语义清晰度，避免因按钮嵌套或样式库干扰导致行为异常。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

立即学习“前端免费学习笔记（深入）”；

完整修正后的表单片段如下：

<form onSubmit={handleSubmit}>
  {/* 其他 input 保持不变 */}
  <label>
    <span>Nome:</span>
    <input 
      required
      type="text" 
      name="displayName"
      placeholder="Nome do usuário"
      value={displayName}
      onChange={(e) => setDisplayName(e.target.value)}
    />
  </label>
  {/* ... 其他字段 ... */}
  <button type="submit" className="btn">Cadastrar</button>
  {error && <p className="error">{error}</p>}
</form>

? 注意事项：

• 不要混用 onClick 与 onSubmit 处理同一提交动作；
• 确保所有 required 输入框均位于 <form> 内部且未被 disabled 或 hidden；
• 若需自定义校验逻辑（如密码强度、邮箱格式），应在 handleSubmit 中手动检查，并配合 setCustomValidity() 增强用户体验；
• 开发时可通过浏览器开发者工具 > Elements 面板，右键检查 input 元素是否真实渲染了 required 属性，排除 JSX 条件渲染遗漏问题。

这样修改后，空字段提交时浏览器将自动聚焦首个未填写的 required 输入框，并显示默认提示，真正发挥 HTML5 表单验证能力，同时保留 React 状态管理的完整性。