validationSchema not working after page reload

[sgarchavada]

Bug report

Current Behavior

I am just simply adding max value validation, which is working fine for the first time, but when I reload the page, and typing again, validation is not applying.

Expected behavior

validation should work after the page reload also.

Reproducible example

import { Formik } from 'formik';
import * as Yup from 'yup';
import TextInput from '../common/TextInput';

const DebitCard = () => {
  const validateSchema = Yup.object().shape({
    cardNo: Yup.string()
      .max(5, 'Must be exactly 5 characters')
      .required('Required')
  })

  return (
    <>
      <Formik
        initialValues={{
          cardNo: '',
        }}
        validationSchema={validateSchema}
        onSubmit={values => {
          alert(JSON.stringify(values, null, 2));
        }}
      >
          <form >
            <div className="flex space-x-5 mt-3">
              <TextInput
                label="Card Number"
                name="cardNo"
                type="number"
               />
          </form>
      </Formik>
    </>
  )
}

export default DebitCard;

Suggested solution(s)

Additional context

It only happen for the first time, if I unfocus the input it started showing the validation error, second time its working fine without loosing focus on input

Your environment

Software	Version(s)
Formik	^2.4.6
React	^1
TypeScript	^5
Browser	Chrome
npm/Yarn	npm
Operating System	Window 11

[erlanggaht]

try to use the component given directly from the formik. the code above I tried to correct

"use client";

import { ErrorMessage, Field, Form, Formik } from "formik";
import * as Yup from "yup";
// import TextInput from "../common/TextInput";

const DebitCard = () => {
 const validateSchema = Yup.object().shape({
   cardNo: Yup.string()
     .max(5, "Must be exactly 5 characters")
     .required("Required"),
 });

 return (
   <>
     <Formik
       initialValues={{
         cardNo: "",
       }}
       validationSchema={validateSchema}
       onSubmit={(values) => {
         alert(JSON.stringify(values, null, 2));
       }}
       action="#"
     >
       <Form>
         <div className="flex space-x-5 mt-3">
         <Field type="number" name="cardNo" placeholder="Number" />{" "}
         </div>
         <ErrorMessage name="cardNo" />
       </Form>
     </Formik>
   </>
 );
};

export default DebitCard;