jaredpalmer / jaredpalmer/formik
validationSchema not working after page reload
- Dominant language
- TypeScript
- Stars
- 34.3k
- Forks
- 2.8k
- PR merge metrics
- No merged PRs in 30d
Description
## 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 (
<>
{
alert(JSON.stringify(values, null, 2));
}}
>
)
}
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
Contributor guide
Research direction
Start with the supplied DebitCard reproduction and inspect Formik's validationSchema behavior after a page reload, focusing on the first focused input and subsequent blur. Confirm the bug against the stated environment and verify that max-value validation appears immediately after reload without requiring the input to lose focus.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100