React表单required属性验证失效，求原因及快速修复方案

问题原因 #

你给提交按钮绑定了onClick事件直接调用handleSubmit，并且在函数里执行了e.preventDefault()——这直接跳过了浏览器原生的表单提交流程。而HTML原生的required验证逻辑，是在表单默认提交行为触发时才会自动执行的，现在这个流程被你绕开了，所以验证完全没起作用。

快速修复方案（推荐） #

移除提交按钮的onClick绑定，把handleSubmit绑定到<form>标签的onSubmit属性上。这样点击提交按钮时，浏览器会先自动执行原生表单验证，验证通过后才会进入handleSubmit的逻辑。

修改后的完整代码：

import React, { useState } from 'react';
// 注意：需确保styles已正确导入，比如 import styles from './Login.module.css'

export const Login = () => {
  const [username, setUsername] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log("test");
    // 在这里编写你的登录逻辑
  }

  return(
    <form className={styles["form-parent"]} onSubmit={handleSubmit}>
      {/* Title */}
      <h1 className={styles["form-title"]}>Login</h1>

      {/* Username */}
      <div className={styles["form-input-group"]}>
        <label> <b>Username:</b></label>
        <input 
          className={styles["form-input"]} 
          type="text" 
          name="username"
          title="Enter your username in this field" 
          required
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>

      {/* Login button */}
      <div className={styles["form-input-group"]}>
        <input 
          className={styles["form-button"]} 
          type="submit" 
          value="Log In"
          title="Click here to login"
          // 移除此处的onClick绑定
        />
      </div>
    </form>
  );
}

特殊场景替代方案 #

如果因特殊需求必须保留按钮的onClick，可以在handleSubmit里手动触发验证：

const handleSubmit = async (e) => {
  e.preventDefault();
  const form = e.target.form; // 获取当前表单元素
  if (!form.checkValidity()) {
    form.reportValidity(); // 弹出原生验证提示框
    return;
  }
  console.log("test");
  // 后续登录逻辑
}

不过这种方式不如直接绑定表单onSubmit简洁自然，优先推荐第一种方案。

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