DEV Community

Discussion on: How to Create Custom Form Validation in React with Yup

lukeshiru profile image

You should consider adding the props required and pattern to your Field component, and finding a way of translating your Formik validations to those, so that it works better with SSR and JS disabled. Also, if JS is enabled you could add a useEffect that makes use of setCustomValidity so you can then use stuff like :invalid from CSS. Is pretty common to find this kind of tutorials using Formik that completely forget about native validations, and ideally you should have those in your forms whatever you're using Formik or not.