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在表单中起作用？

1 个答案: