How to apply a client-side validation scheme using yup?

[ronaldaraujo]

I looked for some alternatives, but without success. Is it currently possible to insert a validation schema inside useForm?

I'm trying to do something like this:

type Props = {
  full_name: string;
  document: string;
  email: string;
  password: string;
  password_confirmation: string;
  accept_terms: string;
};

const schema = yup.object().shape({
  full_name: yup.string().required(),
  document: yup.string().required(),
  email: yup.string().required(),
  password: yup.string().required(),
  password_confirmation: yup
    .string()
    .required()
    .oneOf([yup.ref('password'), null], 'error...'),
  accept_terms: yup.string().required()
});

const { data, setData, processing, reset, errors } = useForm<Props>({
    **validationSchema: schema**
});

[joaopalopes24]

@ronaldaraujo You did it?

[ronaldaraujo]

Hi @joaopalopes24. I abandoned using useForm from Inertia. Instead, I opted for utilizing useForm from the compatible framework. For instance, I currently employ Mantine and import useForm from @mantine/form. For example.

import { yupResolver } from 'mantine-form-yup-resolver';
import * as yup from 'yup';

...

const schema = yup.object().shape({
  email: yup.string().required('E-mail é obrigatório').email('E-mail inválido'),
  password: yup
    .string()
    .required('Senha é obrigatória')
    .min(8, 'A senha deve ter no mínimo 8 caracteres'),
  remember: yup.boolean().nullable()
});

...

const form = useForm<FormValues>({
  initialValues: {
      email: '',
      password: '',
      remember: false
    },
    validate: yupResolver(schema)
});

[joaopalopes24]

@ronaldaraujo Thanks.