why required field validation not working in form using react?

Question

hi I am doing form validation using react-final-form.I also take help from this example https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/field-level-validation?from-embed I am trying to do same thing when I click submit button it will show Required error if the field is required.

currently, in my demo, it is not showing this

here is my code https://codesandbox.io/s/quizzical-hellman-65dy3

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

is there any way to show required message ?

Answer 1

The error message is available as a prop, but you actually need to setup the mark-up to display the required message.

You can restructure your SForm like this to have it work with semantic-ui and 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>

See working code: https://codesandbox.io/s/flamboyant-shtern-s1pgj