The Complete Production SOP: How to Deploy and Run Formik & Yup Object Schema Form Management in Autonomous AI Agents

---
name: "formik-yup-schema-validation"
description: "Manage enterprise React forms, touched states, and field validation using Formik and Yup."
triggers:
  - "create formik form yup"
  - "use fastfield formik"
  - "handle touched errors formik"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import * as Yup from 'yup';

export const loginSchema = Yup.object().shape({
  email: Yup.string()
    .email('Invalid email address format')
    .required('Email is required'),
  password: Yup.string()
    .min(8, 'Password must be at least 8 characters')
    .matches(/[a-zA-Z]/, 'Password must contain letters')
    .matches(/[0-9]/, 'Password must contain numbers')
    .required('Password is required'),
  rememberMe: Yup.boolean().default(false)
});

export type LoginFormValues = Yup.InferType<typeof loginSchema>;

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import { loginSchema, LoginFormValues } from '../schemas/loginSchema';

const initialValues: LoginFormValues = {
  email: '',
  password: '',
  rememberMe: false,
};

export const LoginForm: React.FC = () => {
  return (
    <Formik
      initialValues={initialValues}
      validationSchema={loginSchema}
      onSubmit={async (values, { setSubmitting, resetForm }) => {
        try {
          await fetch('/api/login', {
            method: 'POST',
            body: JSON.stringify(values),
            headers: { 'Content-Type': 'application/json' },
          });
          resetForm();
        } finally {
          setSubmitting(false);
        }
      }}
    >
      {({ isSubmitting, touched, errors }) => (
        <Form noValidate className="space-y-4">
          <div>
            <label htmlFor="email">Email</label>
            <Field
              id="email"
              name="email"
              type="email"
              className={touched.email && errors.email ? 'border-red-500' : ''}
            />
            <ErrorMessage name="email" component="div" className="text-red-500 text-sm" />
          </div>

          <div>
            <label htmlFor="password">Password</label>
            <Field
              id="password"
              name="password"
              type="password"
              className={touched.password && errors.password ? 'border-red-500' : ''}
            />
            <ErrorMessage name="password" component="div" className="text-red-500 text-sm" />
          </div>

          <button type="submit" disabled={isSubmitting}>
            {isSubmitting ? 'Authenticating...' : 'Sign In'}
          </button>
        </Form>
      )}
    </Formik>
  );
};

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { LoginForm } from '../LoginForm';

test('renders validation error when email is invalid', async () => {
  render(<LoginForm />);
  const emailInput = screen.getByLabelText(/email/i);
  
  fireEvent.change(emailInput, { target: { value: 'invalid-email' } });
  fireEvent.blur(emailInput);

  await waitFor(() => {
    expect(screen.getByText(/invalid email address format/i)).toBeInTheDocument();
  });
});