frozen-sapphire•2w ago

I would like to display a required message at the bottom of the form input when the input is not ent

<FormControl>
                <FormLabel>{isPay ? '추가 지급할 적립금' : '회수할 적립금'}</FormLabel>
                <OutlinedInput
                  type="number"
                  id="amount"
                  error={!!errors.amount}
                  {...register('amount', {
                    required: t('errors.required.field', {
                      field: 'amount',
                    }),
                    valueAsNumber: true,
                  })}
                  style={{ height: '40px' }}
                />
              </FormControl>

<FormControl>
                <FormLabel>{isPay ? '추가 지급할 적립금' : '회수할 적립금'}</FormLabel>
                <OutlinedInput
                  type="number"
                  id="amount"
                  error={!!errors.amount}
                  {...register('amount', {
                    required: t('errors.required.field', {
                      field: 'amount',
                    }),
                    valueAsNumber: true,
                  })}
                  style={{ height: '40px' }}
                />
              </FormControl>

2 Replies

kapa.ai•2w ago

Hi @florent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To display a required message at the bottom of the form input when the input is not entered, you can use the FormErrorMessage component from Chakra UI. Below is an example of how you can modify your code to include the error message:

<FormControl isInvalid={!!errors.amount}>
  <FormLabel>{isPay ? '추가 지급할 적립금' : '회수할 적립금'}</FormLabel>
  <OutlinedInput
    type="number"
    id="amount"
    error={!!errors.amount}
    {...register('amount', {
      required: t('errors.required.field', {
        field: 'amount',
      }),
      valueAsNumber: true,
    })}
    style={{ height: '40px' }}
  />
  <FormErrorMessage>
    {errors.amount && errors.amount.message}
  </FormErrorMessage>
</FormControl>

<FormControl isInvalid={!!errors.amount}>
  <FormLabel>{isPay ? '추가 지급할 적립금' : '회수할 적립금'}</FormLabel>
  <OutlinedInput
    type="number"
    id="amount"
    error={!!errors.amount}
    {...register('amount', {
      required: t('errors.required.field', {
        field: 'amount',
      }),
      valueAsNumber: true,
    })}
    style={{ height: '40px' }}
  />
  <FormErrorMessage>
    {errors.amount && errors.amount.message}
  </FormErrorMessage>
</FormControl>

In this code: - FormControl is wrapped with isInvalid={!!errors.amount} to indicate that the form control is invalid if there are errors. - FormErrorMessage is used to display the error message if errors.amount exists. This approach ensures that the error message is displayed at the bottom of the input field when the input is not entered. For more details, you can refer to the Chakra UI integration documentation (https://refine.dev/docs/ui-integrations/chakra-ui/introduction/) and the React Hook Form validation examples (https://refine.dev/blog/react-hook-form-validation-examples/#conclusion). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below