双重用途的引导验证不起作用

Question

我有一个用于添加和编辑组织的表单。如果表单处于添加模式(默认)，那么您还可以创建一个默认的Admin用户，作为设置组织的一部分。如果表单处于Edit模式(它传递了一个organisationId)，那么您将看不到任何与用户相关的字段。

表单的验证在添加模式下正常工作。然而，在编辑模式下，我发现它似乎永远不会将验证设置为真。我一直在寻找解决办法，但我找不到任何适合我情况的办法。希望这里有人有一些真知灼见。

该网站是一个React应用程序，我使用React -bootstrap以防万一。

下面是表单代码:

<Form noValidate={true} validated={validated} onSubmit={handleSubmit}>
<FloatingLabel controlId="name" label="Organisation Name" className="mb-3">
<Form.Control
type="text"
onChange={(e) => setName(e.target.value)}
value={name}
required
placeholder="Organisation Name"
/>
</FloatingLabel>
{!id?.length && (
<fieldset name="Create Admin User" className="border p-2 mb-3">
<legend className="w-auto">Create Admin User</legend>
<FloatingLabel controlId="email" label="Email" className="mb-3">
<Form.Control
type="email"
onChange={(e) => setEmail(e.target.value)}
value={email}
required
placeholder="Email"
/>
</FloatingLabel>
<FloatingLabel controlId="username" label="Username" className="mb-3">
<Form.Control
type="text"
autoComplete="off"
onChange={(e) => setUser(e.target.value)}
value={user}
required
placeholder="Username"
/>
<Form.Control.Feedback type="invalid">
4 to 24 characters.
<br />
Must begin with a letter.
<br />
Letters, numbers, underscores, hyphens allowed.
</Form.Control.Feedback>
</FloatingLabel>
</fieldset>
)}
<Button type="submit">Save Organisation</Button>
</Form>

这里是提交处理程序(实际的表单处理被删除，因为它在这里不相关-它要么工作，要么我们永远不会得到它!):

const handleSubmit = async (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
if (id?.length) {
// EDIT MODE
if (validated) {
alert('EDITING');
// The actual form processing should happen here, but that alert never pops up
}
} else {
// NEW ORG MODE
if (validated) {
// We actually get into this if-statement and can process the form as expected
}
}
};

以前有人遇到过这种问题吗?在我的理解中，编辑模式中未显示的字段是否导致了问题，或者这里是否有其他事情发生?

Answer 1

我复制粘贴你的代码片段，它在我这边工作-我看到警告"EDITING":

https://codesandbox.io/s/compassionate-dust-blobvv