多步骤React表单输入模式校验未在第一步生效的问题咨询

• 第一步表单内的跳转按钮没有设置type="submit"，属于原生普通按钮，绑定点击事件后直接执行步骤跳转，完全绕过了HTML内置的表单校验触发机制。浏览器内置的表单校验（包含pattern匹配、required必填、长度规则校验），仅在表单触发正式submit提交动作时才会执行，当前逻辑直接跳过提交动作切步骤，所有校验规则不会在第一步触发。
• 两个步骤的表单共用了同一个DOM idadmin_form，会导致浏览器的校验逻辑跨DOM元素识别，把第一步未触发的校验延迟到第二步才弹出提示。
• 现有代码存在React属性编写错误：React环境下的长度限制属性需要写成驼峰形式maxLength/minLength，原代码写的小写HTML原生属性不会被React渲染识别，规则本身就没生效。

• 重构第一步的提交触发逻辑：
  • 移除提交按钮上直接绑定的onClick跳转逻辑，将按钮类型设置为type="submit"
  • 给第一步的<form>标签绑定onSubmit事件，在事件中先调用checkValidity()方法主动触发当前表单所有字段的校验，校验通过后再执行步骤跳转
  • 注意在提交事件开头调用e.preventDefault()，阻止浏览器默认的表单跳转行为
• 修正代码中不生效的规则配置：
  • 将Aadhar号输入框的maxlength/minlength改为React识别的maxLength={12}/minLength={12}
  • 给第一步的性别选择框补充required属性，避免空值通过校验
  • 给两个步骤的表单设置独立的id，避免DOM元素混淆导致的校验逻辑错乱
• （可选）实现输入过程中的即时校验：
  • 给第一步的所有输入框补充onInput事件，在事件中调用当前元素的checkValidity()方法，用户输入、失焦时就会立刻弹出不符合规则的提示，无需等待点击提交

第一步表单核心结构修改后参考：

<form 
  id="step1_form"
  onSubmit={(e) => {
    e.preventDefault();
    // 主动触发全表单校验
    const isFormValid = e.target.checkValidity();
    // 校验通过才进入第二步
    if (isFormValid) {
      setstep(prevStep => prevStep + 1);
    }
  }}
>
  {/* 原有所有输入、选择框保持不变，注意修正长度属性写法 */}
  <input
    type="text"
    name="aadhar"
    maxLength={12}
    minLength={12}
    // ...其他原有属性
  />
  <select
    name="Sex"
    required
    // ...其他原有属性
  >
    {/* 原有选项 */}
  </select>
  <button type="submit">提交</button>
</form>

内容的提问来源于stack exchange，提问作者Shivam Sourav Jha