How can I use Formik with validation schemas?

How can I use Formik with validation schemas?

You can use Formik with validation schemas by integrating libraries like Yup to define your validation rules.

Can you show me a simple example of using Yup with Formik?

Sure! Here's a basic example:

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(6, 'Too Short!').required('Required'),
});

<Formik
  initialValues={{ email: '', password: '' }}
  validationSchema={validationSchema}
  onSubmit={values => { console.log(values); }}
>
  {() => (
    <Form>
      <Field name="email" type="email" />
      <ErrorMessage name="email" component="div" />
      <Field name="password" type="password" />
      <ErrorMessage name="password" component="div" />
      <button type="submit">Submit</button>
    </Form>
  )}
</Formik>

What are some common validation rules I can use with Yup?

Common validation rules in Yup include:

• string().required() for required fields
• string().email() for email validation
• number().min() and number().max() for numeric ranges
• string().min() and string().max() for string length constraints.