CODEWITHSUNDEEP
react-nativevalidationreact-hook-formyup
Simon
Simon

Reputation: 6462

React-native form validation with react-hook-form and Yup

I try to validate a form in React-Native (0.69.6) with react-hook-form (7.29.0) and yup (0.32.11 with @hookform/resolvers 2.9.10).

I have this minimal reproducible example that always show isValid as false and errors as an empty object {}:

 const schema = yup
    .object()
    .shape({
      name: yup.string().required(),
    })
    .required();

  const {
    control,
    formState: { errors, isValid },
  } = useForm({
    resolver: yupResolver(schema),
  });

  return (
    <>
      <Text>{JSON.stringify(errors)}</Text>
      <Text>{JSON.stringify(isValid)}</Text>
      <Controller
        control={control}
        render={({ field: { onChange, value } }) => (
          <Input value={value} onChangeText={onChange} />
        )}
        name="name"
      />
    </>
  );

Why this simple validation does not work, what am I missing?

Upvotes: 1

Views: 2227

Answers (1)

Simon
Simon

Reputation: 6462

errors and isValid are populated when submitting the form.

In order to see them updated in live as the data changes, just add:

mode: "onChange",

as follow:

  const {
    control,
    handleSubmit,
    formState: { errors, isValid },
  } = useForm({
    mode: "onChange",
    resolver: yupResolver(schema),
  });

Upvotes: 2

Related Questions