Add Formik and Yup to handle forms

Formik and Yup libraries have been introduced to handle forms and their validation, respectively. This improves the clarity and robustness of form validation. Handled logic includes character restrictions, requirement conditions, and minimum and maximum length constraints for the 'username', 'email', and 'question' fields of the contact form.

package-lock.json

@@ -15,12 +15,14 @@
         "@types/node": "^20.10.6",
         "@types/react": "^18.2.47",
         "@types/react-dom": "^18.2.18",
+        "formik": "^2.4.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-helmet": "^6.1.0",
         "react-scripts": "^5.0.1",
         "typescript": "^5.3.3",
-        "web-vitals": "^3.5.1"
+        "web-vitals": "^3.5.1",
+        "yup": "^1.3.3"
       },
       "devDependencies": {
         "@types/react-helmet": "^6.1.11",
@@ -4669,6 +4671,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -9059,6 +9070,43 @@
         "node": ">= 6"
       }
     },
+    "node_modules/formik": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.5.tgz",
+      "integrity": "sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/formik/node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/formik/node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -9470,6 +9518,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -13739,6 +13800,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -16058,6 +16124,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -19117,6 +19188,16 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -19149,6 +19230,11 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
@@ -20502,6 +20588,28 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yup": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.3.3.tgz",
+      "integrity": "sha512-v8QwZSsHH2K3/G9WSkp6mZKO+hugKT1EmnMqLNUcfu51HU9MDyhlETT/JgtzprnrnQHPWsjc6MUDMBp/l9fNnw==",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     }
   },
   "dependencies": {
@@ -23758,6 +23866,15 @@
         "@types/node": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -27021,6 +27138,33 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formik": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.5.tgz",
+      "integrity": "sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ==",
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+        },
+        "react-fast-compare": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+          "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+        }
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -27300,6 +27444,21 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -30584,6 +30743,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -32078,6 +32242,11 @@
         }
       }
     },
+    "property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -34366,6 +34535,16 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -34389,6 +34568,11 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
     },
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "tough-cookie": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
@@ -35426,6 +35610,24 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "yup": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.3.3.tgz",
+      "integrity": "sha512-v8QwZSsHH2K3/G9WSkp6mZKO+hugKT1EmnMqLNUcfu51HU9MDyhlETT/JgtzprnrnQHPWsjc6MUDMBp/l9fNnw==",
+      "requires": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "2.19.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+          "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA=="
+        }
+      }
     }
   }
 }

package.json

@@ -10,12 +10,14 @@
     "@types/node": "^20.10.6",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
+    "formik": "^2.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-scripts": "^5.0.1",
     "typescript": "^5.3.3",
-    "web-vitals": "^3.5.1"
+    "web-vitals": "^3.5.1",
+    "yup": "^1.3.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/contact_form/contact.tsx

@@ -1,6 +1,8 @@
-import React, {ChangeEvent, useState} from "react";
+import React, {useState} from "react";
 import './Contact.css';
-import { useNavigate } from 'react-router-dom'
+import {useNavigate} from 'react-router-dom'
+import {validationSchema} from "./validationSchema";
+import {ErrorMessage, Field, Form, Formik, FormikValues} from "formik";
 
 type InputNames = "username" | "email" | "question";
 
@@ -14,36 +16,12 @@ interface Step {
     pattern: string;
 }
 
-type FormDataType = Record<InputNames, string>;
-
 const ContactForm = () => {
 
-    const navigate = useNavigate()
+    const navigate = useNavigate();
-
-    const [formData, setFormData] = useState<FormDataType>({
-        username: "",
-        email: "",
-        question: ""
-    });
 
     const [currentStep, setCurrentStep] = useState<number>(0);
-    const [errorMessage, setErrorMessage] = useState<string>("");
 
-    function handleChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-        const { name, value } = e.target;
-        setErrorMessage("");
-        switch (name) {
-            case 'username':
-                if (/^[a-zA-Z0-9_]*$/.test(value)) {
-                    setFormData(prevState => ({ ...prevState, [name]: value }));
-                } else {
-                    setErrorMessage('Invalid character entered. Please use only alphanumeric characters and underscores.');
-                }
-                break;
-            default:
-                setFormData(prevState => ({ ...prevState, [name]: value }));
-        }
-    }
 
     const steps: Step[] = [
         {
@@ -61,7 +39,7 @@ const ContactForm = () => {
             type: "email",
             min_length: 3,
             max_length: 254,
-            required: false,
+            required: true,
             pattern: ""
         },
         {
@@ -75,29 +53,27 @@ const ContactForm = () => {
         },
     ]
 
-    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    const handleSubmit = async (e: FormikValues) => {
-        e.preventDefault();
         try {
             const response = await fetch('http://localhost:8080/api/contact/submitContactForm', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify(formData)
+                body: JSON.stringify(e)
             })
             if (!response.ok) {
                 alert("Your form submission was denied by the server, or the server was unable to process it, if you didn't mess with the data please contact the administrator at admin@alttd.com");
             } else {
                 navigate('/verify-email', {
                     state: {
-                        email: formData.email
+                        email: e['email']
                     }
                 });
             }
         } catch (e) {
             alert("Your form submission was denied by the server, if you didn't mess with the data please contact the administrator at admin@alttd.com")
         }
-
     };
 
     const next = () => {
@@ -106,53 +82,68 @@ const ContactForm = () => {
 
     const prev = () => {
         setCurrentStep(current => Math.max(current - 1, 0))
-        setErrorMessage('');
-    }
-
-    function isNextDisabled(): boolean {
-        let step: Step = steps[currentStep];
-        if (!step)
-            return true;
-        if (!step.required)
-            return false;
-        return formData[step.name].length === 0
-    }
-
-    function getInputField(step: Step): JSX.Element {
-        switch (step.type) {
-            case "text":
-            case "email":
-                return <input pattern={step.pattern} type={step.type} name={step.name} minLength={step.min_length}
-                              maxLength={step.max_length} onChange={handleChange} value={formData[step.name]} required/>
-            case "textarea":
-                return <textarea name={step.name} minLength={step.min_length} maxLength={step.max_length}
-                                 onChange={handleChange} value={formData.question} required/>
-        }
     }
 
+    const [prevLength, setPrevLength] = useState(0);
     return (
         <div className="container">
             <div>
                 <h1>Contact Form</h1>
             </div>
-            {errorMessage && <p>{errorMessage}</p>}
             <div>
-                <form onSubmit={handleSubmit}>
+                <Formik
-                    <div>
+                    initialValues={{username: '', email: '', question: ''}}
-                        <label>
+                    validationSchema={validationSchema}
-                            {steps[currentStep].label}
+                    onSubmit={(values: FormikValues) => {
-                            {getInputField(steps[currentStep])}
+                        handleSubmit(values);
-                        </label>
+                    }}
-                    </div>
+                >
-                    <button type="button" onClick={prev} disabled={currentStep === 0}>
+                    {({
-                        Previous
+                          touched,
-                    </button>
+                          errors,
-                    <button type="button" onClick={next} disabled={currentStep === steps.length - 1 || isNextDisabled()}>
+                          isValid,
-                        Next
+                          handleChange,
-                    </button>
+                          values,
-                    <input type="submit" value="Submit" disabled={currentStep !== steps.length - 1}
+                          setFieldTouched
-                           hidden={currentStep !== steps.length - 1}/>
+                      }) => (
-                </form>
+
+                        <Form>
+                            <div>
+                                <label>
+                                    {steps[currentStep].label}
+                                    <Field
+                                        type={steps[currentStep].type}
+                                        name={steps[currentStep].name}
+                                        required={steps[currentStep].required}
+                                        min={steps[currentStep].min_length}
+                                        max={steps[currentStep].max_length}
+                                        as={(steps[currentStep].type === "textarea") ? "textarea" : "input"}
+                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                            handleChange(e);
+                                            if (prevLength != values[steps[currentStep].name].length) {
+                                                setFieldTouched(steps[currentStep].name);
+                                                setPrevLength(values[steps[currentStep].name].length);
+                                            }
+                                        }}
+                                    />
+                                    <ErrorMessage name={steps[currentStep].name} component="div"/>
+                                </label>
+                            </div>
+                            <button type="button" onClick={prev} disabled={currentStep === 0}>
+                                Previous
+                            </button>
+                            <button type="button" onClick={next}
+                                    hidden={currentStep === (steps.length - 1)}
+                                    disabled={(!touched[steps[currentStep].name] || !!errors[steps[currentStep].name]) || currentStep === (steps.length - 1)}>
+                                Next
+                            </button>
+                            <input type="submit" value="Submit"
+                                   hidden={currentStep !== (steps.length - 1)}
+                                   disabled={!isValid || currentStep !== (steps.length - 1)}
+                            />
+                        </Form>
+                    )}
+                </Formik>
             </div>
         </div>
     );

src/components/contact_form/validationSchema.tsx

@@ -0,0 +1,20 @@
+import * as Yup from 'yup';
+
+export const validationSchema = Yup.object().shape({
+    username: Yup.string()
+        .min(3, 'Username should be at least 3 characters')
+        .max(16, 'Username should not exceed 16 characters')
+        .matches(/^[a-zA-Z0-9_]*$/, 'Username should only include alphanumeric characters and underscore')
+        .required('Username is required'),
+
+    email: Yup.string()
+        .email('Invalid email')
+        .min(3, 'Email should be at least 3 characters')
+        .max(254, 'Email should not exceed 254 characters')
+        .required(),
+
+    question: Yup.string()
+        .min(10, 'Question should be at least 10 characters')
+        .max(2000, 'Question should not exceed 2000 characters')
+        .required('Question is required')
+});