{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/react-tutorial-adding-form-validation-using-react-formik/", "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"4e86be9e-cf7f-53c0-b73e-8ca0894a818c","excerpt":"In this article i will explain you how you can use formik and yup for validation of your form in react typescript project Step 1: Create React typescript…","html":"

In this article i will explain you how you can use formik and yup for validation of your form in react typescript project

\n

Step 1: Create React typescript project

\n

Create react typescript project or you can skip this step if you wanted to use formik and yup validation in to your existing project

\n
npx create-react-app my-app --template typescript\n
\n

Step 2: Install formik and yup in your project

\n

Use the following command to install formik and yup

\n
npm install --save formik yup\n
\n

Step 3: Choose any form where you wanted to add the formik validation i will give you an example of login form

\n
//Here we have imported the required package yup and formik npm package\nimport React from \"react\";\nimport { withFormik, FormikProps } from \"formik\";\nimport * as Yup from \"yup\";\n\n/**\n * Required interface types declared for yup and formik\n * */\ninterface FormValues {\n  email: string;\n  password: string;\n}\n\ninterface OtherProps {\n  title?: string;\n  ref?: any;\n}\n\ninterface MyFormProps {\n  initialEmail?: string;\n  initialPassword?: string;\n  login?: any;\n}\n\n/** *\n * This is the form where we will be defining out inputs and other field and checking validation\n * */\n\nconst InnerForm = (props: OtherProps & FormikProps<FormValues>) => {\n  const {\n    values,\n    errors,\n    touched,\n    handleChange,\n    handleBlur,\n    handleSubmit,\n    isSubmitting,\n    ref,\n  } = props;\n\n  return (\n    <React.Fragment>\n      <main className=\"form-signin\">\n        <form onSubmit={handleSubmit}>\n          <div className=\"form-floating\">\n            <input\n              type=\"email\"\n              className=\"form-control\"\n              name=\"email\"\n              id=\"floatingInput\"\n              placeholder=\"name@example.com\"\n              onChange={handleChange}\n              onBlur={handleBlur}\n              value={values.email}\n            />\n            <label htmlFor=\"floatingInput\">Email address</label>\n          </div>\n          {touched.email && errors.email && (\n            <div style={{ display: \"auto\" }} className=\"invalid-feedback\">\n              {errors.email}\n            </div>\n          )}\n\n          <div className=\"form-floating mt-3\">\n            <input\n              type=\"password\"\n              className=\"form-control\"\n              name=\"password\"\n              id=\"floatingPassword\"\n              placeholder=\"Password\"\n              onChange={handleChange}\n              onBlur={handleBlur}\n              value={values.password}\n            />\n            <label htmlFor=\"floatingPassword\">Password</label>\n          </div>\n          {touched.password && errors.password && (\n            <div style={{ display: \"auto\" }} className=\"invalid-feedback\">\n              {errors.password}\n            </div>\n          )}\n\n          <div className=\"checkbox mb-3 mt-3\">\n            <label>\n              <input\n                name=\"remember\"\n                type=\"checkbox\"\n                defaultValue=\"remember-me\"\n              />{\" \"}\n              Remember me\n            </label>\n          </div>\n          <button\n            disabled={\n              isSubmitting ||\n              !!(errors.email && touched.email) ||\n              !!(errors.password && touched.password)\n            }\n            className=\"w-100 btn btn-lg btn-warning\"\n            type=\"submit\"\n          >\n            Sign in\n          </button>\n        </form>\n      </main>\n    </React.Fragment>\n  );\n};\n\n//This is the LoginForm component where we are executing main logic after form validation and\n//also act as high order component for our InnerForm component\nconst LoginForm = withFormik<MyFormProps, FormValues>({\n  mapPropsToValues: (props) => ({\n    email: props.initialEmail || \"\",\n    password: props.initialPassword || \"\",\n  }),\n\n  validationSchema: Yup.object().shape({\n    email: Yup.string().email(\"Email not valid\").required(\"Email is required\"),\n    password: Yup.string().required(\"Password is required\"),\n  }),\n\n  handleSubmit(\n    { email, password }: FormValues,\n    { props, setSubmitting, setErrors }: any\n  ) {\n       console.log(\"Email\", email);\n       console.log(\"Password\", password);\n    },\n})(InnerForm);\n\n\n//This is the login component which we will be exporting as default and we will be calling our login Form component\nconst Login: React.FC<{}> = (props: any) => {\n    return(\n      <div>\n         <LoginForm/>\n      </div>\n    )\n}\n\nexport default Login;\n
","fields":{"slug":"/react-tutorial-adding-form-validation-using-react-formik/"},"frontmatter":{"title":"React tutorial adding react formik validation in react typescript project","date":"March 03, 2023","description":"In this article i will explain you to add validation to your form using formik and yup in react typescript project","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React.jpg"}},"previous":{"fields":{"slug":"/react-native-firebase-setup-javascript/"},"frontmatter":{"title":"Email authentication with firebase in react native android application","date":"February 20, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/email-authentication-firebase.jpeg"}},"next":{"fields":{"slug":"/react-tutorial-parent-child-component-communication-react/"},"frontmatter":{"title":"React tutorial parent child communication in react typescript project","date":"March 10, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React.jpg"}}},"pageContext":{"id":"4e86be9e-cf7f-53c0-b73e-8ca0894a818c","previousPostId":"af9dd2a0-26c0-59de-af5d-062d97ae4d52","nextPostId":"05040a2d-717a-52ca-91b0-3487fe4b3aa1"}}, "staticQueryHashes": ["3860684146"]}