为什么需要的字段验证在使用 React 的表单中不起作用？

Question

你好，我正在使用 react-final-form 进行表单验证。我也从这个例子中得到了帮助 https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/field-level-validation?from-embed 当我单击 submit 按钮时，我正在尝试做同样的事情，如果需要该字段，它将显示 Required 错误。

目前，在我的演示中，它没有显示这个

这是我的代码 https://codesandbox.io/s/quizzical-hellman-65dy3

<RFField
    component={SForm.Input}
    label="Name"
    name="name"
    placeholder="Please Enter full Name"
    required={true}
    validate={required}
/>

有什么方法可以显示所需的消息吗？

Answer 1

错误消息可作为道具使用，但您实际上需要设置标记以显示 required 消息。

您可以像这样重组您的 SForm 以使其与 semantic-ui 和 react-final-form 一起使用。

  <SForm.Group widths="equal">
    <RFField
      label="Name"
      name="name"
      validate={required}
    >
      {({ input, meta }) => (
        <div>
          <label>First Name</label>
          <SForm.Input {...input} type="text" placeholder="First Name"/>
          {meta.error && meta.touched && <span>{meta.error}</span>}
        </div>
      )}
    </RFField>
    <RFField
      label="last Name"
      name="lastName"
      validate={required}
    >
      {({ input, meta }) => (
        <div>
          <label>Last Name</label>
          <SForm.Input {...input} type="text" placeholder="Last Name"/>
          {meta.error && meta.touched && <span>{meta.error}</span>}
        </div>
      )}
    </RFField>
  </SForm.Group>

查看工作代码：https://codesandbox.io/s/flamboyant-shtern-s1pgj

为什么需要的字段验证在使用 React 的表单中不起作用？

why required field validation not working in form using react?

reactjs

semantic-ui

final-form

react-final-form