From 2cb5c471f6b2d03c79baaeea21164640886e8208 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Wed, 24 Apr 2024 11:42:04 +0100 Subject: [PATCH] form validation with formik --- .../home/DashboardHomeRefereeInfo.tsx | 20 +- .../GetStarted/ApplicantsAttestation.tsx | 1 + src/components/GetStarted/BasicInfo.tsx | 360 ++++++++++++---- src/components/GetStarted/DebitAccount.tsx | 193 ++++++--- .../GetStarted/EmploymentDetails.tsx | 99 ----- src/components/GetStarted/GetStarted.tsx | 28 -- src/components/GetStarted/IntroDetails.tsx | 140 ------ src/components/GetStarted/LoanAmountComp.tsx | 253 +++++++---- src/components/GetStarted/OtpSection.tsx | 111 ----- .../GetStarted/ReferenceDetails.tsx | 126 ------ src/components/GetStarted/SpouseDetails.tsx | 49 --- .../GetStarted/YourAreAlmostThere.tsx | 399 +++++++++++++++++- src/components/shared/InputCompOne.tsx | 2 +- 13 files changed, 977 insertions(+), 804 deletions(-) delete mode 100644 src/components/GetStarted/EmploymentDetails.tsx delete mode 100644 src/components/GetStarted/IntroDetails.tsx delete mode 100644 src/components/GetStarted/OtpSection.tsx delete mode 100644 src/components/GetStarted/ReferenceDetails.tsx delete mode 100644 src/components/GetStarted/SpouseDetails.tsx diff --git a/src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx b/src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx index f66c5bd..eb5d0a4 100644 --- a/src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx +++ b/src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx @@ -32,7 +32,15 @@ const validationSchema = Yup.object().shape({ ref_relationship: Yup.string() .required("Required"), ref_bvn: Yup.string() - .required("Required"), + .required("BVN is required") + .test("no-e", "Invalid number", (value:any) => { + if (value && /^[0-9]*$/.test(value) == false) { + return false; + } + return true; + }) + .min(11, "must be 11 digits") + .max(11, "must be 11 digits"), ref_two_name: Yup.string() .required("Required"), ref_two_email: Yup.string() @@ -43,7 +51,15 @@ const validationSchema = Yup.object().shape({ ref_two_relationship: Yup.string() .required("Required"), ref_two_bvn: Yup.string() - .required("Required"), + .required("BVN is required") + .test("no-e", "Invalid number", (value:any) => { + if (value && /^[0-9]*$/.test(value) == false) { + return false; + } + return true; + }) + .min(11, "must be 11 digits") + .max(11, "must be 11 digits"), }); export default function DashboardHomeRefereeInfo({handleNextStep}:Props) { diff --git a/src/components/GetStarted/ApplicantsAttestation.tsx b/src/components/GetStarted/ApplicantsAttestation.tsx index a5a2c50..4a01616 100644 --- a/src/components/GetStarted/ApplicantsAttestation.tsx +++ b/src/components/GetStarted/ApplicantsAttestation.tsx @@ -1,6 +1,7 @@ import React from "react"; import DebitAccount from "./DebitAccount"; + const ApplicantsAttestation: React.FC = () => { return ( <> diff --git a/src/components/GetStarted/BasicInfo.tsx b/src/components/GetStarted/BasicInfo.tsx index 659045e..9d16d84 100644 --- a/src/components/GetStarted/BasicInfo.tsx +++ b/src/components/GetStarted/BasicInfo.tsx @@ -1,61 +1,87 @@ -import React, { useRef, useState } from "react"; -import InputDetails from "./IntroDetails"; -import OTPSection from "./OtpSection"; -import SpouseDetails from "./SpouseDetails"; -import { Button } from ".."; +import React from "react"; -// interface Option { -// value: string; -// label: string; -// } +import { Button, InputCompOne } from ".."; + +import {Formik, Form} from 'formik' +import * as Yup from "yup"; + +const initialValues = { + title: "", + marital_status: "", + agent_id: "", + bvn: "", + first_name: "", + phone: "", + email: "", + surname: "", + dob: "", + second_name: "", + spouse_bvn: "", +}; + +// To get the validation schema +const validationSchema = Yup.object().shape({ + title: Yup.string() + .required("Required"), + marital_status: Yup.string() + .required("Required"), + agent_id: Yup.string() + .required("Required"), + bvn: Yup.string() + .required("BVN is required") + .test("no-e", "Invalid number", (value:any) => { + if (value && /^[0-9]*$/.test(value) == false) { + return false; + } + return true; + }) + .min(11, "must be 11 digits") + .max(11, "must be 11 digits"), + first_name: Yup.string() + .required("Required"), + phone: Yup.string() + .required("Required"), + email: Yup.string() + .required("Required") + .email("Wrong email format"), + surname: Yup.string() + .required("Required"), + dob: Yup.string() + .required("Required"), +}); interface BasicInfoProps { - inputValues: { - title: string; - marital: string; - agentId: string; - bvn: string; - firstName: string; - phone: string; - email: string; - surname: string; - dob: string; - secondName: string; - spouseBVN: string; - }; - setInputValues: React.Dispatch>; handleNextStep: any; } const BasicInfo: React.FC = ({ - inputValues, - setInputValues, handleNextStep, }) => { - const [hideOTPComponent, setHideOTPComponent] = useState(false); - const inputRef = useRef(null); + // const inputRef = useRef(null); - const handleChange = (e: React.FormEvent) => { - const { name, value } = e.target as HTMLInputElement; - setInputValues((prev: typeof inputValues) => ({ ...prev, [name]: value })); - }; + // const handleInput = (e: React.FormEvent) => { + // const { name, value } = e.target as HTMLInputElement; - const handleInput = (e: React.FormEvent) => { - const { name, value } = e.target as HTMLInputElement; + // if (name === "bvn") { + // const isNumeric = /^[0-9]+$/.test(value); - if (name === "bvn") { - const isNumeric = /^[0-9]+$/.test(value); + // if (isNumeric) { + // if (value.length === 10) { + // setHideOTPComponent(false); + // } else { + // setHideOTPComponent(true); + // } + // } else { + // console.log("Invalid BVN"); + // } + // } + // }; - if (isNumeric) { - if (value.length === 10) { - setHideOTPComponent(false); - } else { - setHideOTPComponent(true); - } - } else { - console.log("Invalid BVN"); - } - } + + //FUNCTION TO HANDLE SUBMIT + const handleSubmit = (values:any) => { + console.log(values) + handleNextStep() }; return ( @@ -64,38 +90,222 @@ const BasicInfo: React.FC = ({

Let’s Get You Started

-
- - {!hideOTPComponent && ( - <> - - -