started input validation on forms

src/components/Dashboard/home/DashboardHomeAttestation.tsx

@@ -1,4 +1,7 @@
 import { Button, InputCompOne, Stepper } from '../../shared/index';
+
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
 // import { useNavigate } from "react-router-dom";
 // import { RouteHandler } from '../../../router/routes';
 
@@ -6,9 +9,29 @@ type Props = {
   handleNextStep:()=>any
 }
 
+const initialValues = {
+  account_number: "",
+  checked: false
+};
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  account_number: Yup.string()
+    .required("Required"),
+  checked: Yup.bool() // use bool instead of boolean
+  .oneOf([true], "You must accept the terms and conditions")
+});
+
 export default function DashboardHomeAttestation({handleNextStep}:Props) {
   //     let navigate = useNavigate();
   // const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = (values:any) => {
+    console.log(values)
+    handleNextStep()
+  };
+
   return (
     <div className="w-full">
       <div className="w-full flex justify-center">
@@ -16,31 +39,51 @@ export default function DashboardHomeAttestation({handleNextStep}:Props) {
       </div>
       <p className='my-10 text-red-500 text-lg md:text-2xl'>Applicant's Attestation and Debit Instruction</p>
       <p className='text-red-500 text-base'>NB: Must be your FCMB account number</p>
-      <div className="flex flex-col gap-9">
-        <div className="flex items-center gap-[4.125rem]">
-          <InputCompOne
-            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-            name="applyIshInput"
-            floatLabel="Disbursement account number"
-            // labelClass="font-bold text-[1.125rem]"
-            input
-            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            placeholder="0102547896"
-          />
-        </div>
-        <div className='max-w-[25.875rem] flex gap-4 items-start'>
-            <input type='checkbox' className='w-4 h-4 p-2 accent-purple-600 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500' />
-            <p className='text-[12px] text-justify'>By pressing, you agree that you have read, understood and accept the <span className='text-blue-600'>applicatant's attestation</span> and <span className='text-blue-600'>terms and conditions</span> for FCMB
-                premium salary loan. You also give us permission to collect financial information and run credit checks on the account provided through our partners
-            </p>
-        </div>
-        <Button
-          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
-          text="Apply"
-          type="button"
-          onClick={handleNextStep}
-        />
-      </div>
+      <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+          >
+            {(props)=>(
+              <Form>          
+                <div className="flex flex-col gap-9">
+                  <div className="flex items-center gap-[4.125rem]">
+                    <InputCompOne
+                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                      name="account_number"
+                      floatLabel="Disbursement account number"
+                      // labelClass="font-bold text-[1.125rem]"
+                      input
+                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                      placeholder="0102547896"
+                      value={props.values.account_number}
+                      onChange={props.handleChange}
+                      error={(props.errors.account_number && props.touched.account_number) ? props.errors.account_number : ''}
+                    />
+                  </div>
+                  <div className='max-w-[25.875rem]'>
+                    <div className='flex gap-4 items-start'>
+                      <input 
+                        type='checkbox' 
+                        name="checked"
+                        className='w-4 h-4 p-2 accent-purple-600 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500' 
+                        onChange={props.handleChange}
+                      />
+                      <p className='text-[12px] text-justify'>By pressing, you agree that you have read, understood and accept the <span className='text-blue-600'>applicatant's attestation</span> and <span className='text-blue-600'>terms and conditions</span> for FCMB
+                          premium salary loan. You also give us permission to collect financial information and run credit checks on the account provided through our partners
+                      </p>
+                    </div>
+                    {props.errors.checked && props.touched.checked && <span className='text-[10px] text-red-500'>{props.errors.checked}</span>}
+                  </div>
+                  <Button
+                    className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+                    text="Apply"
+                    type="submit"
+                  />
+                </div>
+              </Form>
+            )}
+      </Formik>
     </div>
   );
 }