如何展开折叠面板项并高亮折叠项内未通过的原生输入验证？

问题场景 #

• 折叠面板内的必填输入框已设置required属性，展开状态下点击提交按钮，空输入会触发原生验证提示Please fill in this field，功能正常
• 折叠面板处于收起状态时，点击提交按钮无任何验证反应

问题原因 #

对应HTML元素被设置为visibility: hidden或display: none时，浏览器原生表单验证不会触发。

需求目标 #

点击提交按钮时，若折叠面板内的必填输入为空，自动展开对应面板并触发原生验证提示。

示例代码 #

import React, { useState, StrictMode } from "react";
import { Accordion, AccordionItem } from "@carbon/react";
import { createRoot } from "react-dom/client";

const App = () => {
  const [text1, setText1] = useState("");
  const [text2, setText2] = useState("");
  const [toggle, setToggle] = useState(true);

  const toggleHandle = () => {
    setToggle(!toggle);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("text1", text1);
  };

  return (
    <>
      <button onClick={toggleHandle}>{toggle ? "collapse" : "expand"}</button>
      <form onSubmit={handleSubmit}>
        <Accordion>
          <AccordionItem title="Title 1" open={toggle}>
            <input
              required
              value={text1}
              onChange={(e) => setText1(e.target.value)}
            />
          </AccordionItem>
          <AccordionItem open={toggle} title="Title 2">
            <input
              required
              value={text2}
              onChange={(e) => setText2(e.target.value)}
            />
          </AccordionItem>
        </Accordion>
        <button type="submit">Submit</button>
      </form>
    </>
  );
};

const root = createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

临时方案疑问 #

尝试过通过添加自定义错误并在setTimeout中调用的临时方案，但不确定是否为最优解，且该方案仅支持单个输入，而实际场景中有多个必填输入。请问是否需要为每个输入单独配置，或者存在更通用的解决方案？

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