started input validation on forms

src/components/GetStarted/BVN.tsx

@@ -32,6 +32,7 @@ const BVN = ({handleNextStep}:Props) => {
 
   const handleSubmit = (values:any) => {
     console.log('values', values)
+    handleNextStep()
   };
 
   return (
@@ -70,7 +71,6 @@ const BVN = ({handleNextStep}:Props) => {
               <button
                 type='submit'
                 className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
-                onClick={handleNextStep}
               >
                 Enter
               </button>

src/components/GetStarted/IntroDetails.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import InputCompOne from "../shared/InputCompOne";
 
-interface Option {
-  value: string;
-  label: string;
+interface SelectOption {
+  loading: boolean;
+  data: {value: string;
+  label: string}[]
 }
 
 interface InputSectionProps {
@@ -56,7 +57,7 @@ const InputSection: React.FC<InputSectionProps> = ({
         "font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]",
       select: true,
       selectClass: "w-full h-[36px] rounded-[6px]",
-      selectOptions: [{ value: "", label: "Select" }],
+      selectOptions: {loading: false, data:[{ value: "", label: "Select" }]},
       value: inputValues.agentId,
       onInput: handleInput,
     },
@@ -116,18 +117,24 @@ const InputSection: React.FC<InputSectionProps> = ({
 
 export default InputSection;
 
-const maritalStatusOptions: Option[] = [
-  { value: "", label: "Select" },
-  { value: "single", label: "Single" },
-  { value: "married", label: "Married" },
-  { value: "divorced", label: "Divorced" },
-  { value: "widowed", label: "Widowed" },
-];
+const maritalStatusOptions: SelectOption = {
+  loading: false,
+  data: [
+    { value: "", label: "Select" },
+    { value: "single", label: "Single" },
+    { value: "married", label: "Married" },
+    { value: "divorced", label: "Divorced" },
+    { value: "widowed", label: "Widowed" },
+  ]
+}
 
-const titleOptions: Option[] = [
-  { value: "", label: "Select" },
-  { value: "ms", label: "Ms" },
-  { value: "mr", label: "Mr" },
-  { value: "miss", label: "Miss" },
-  { value: "mrs", label: "Mrs" },
-];
+const titleOptions: SelectOption = {
+  loading: false,
+  data: [
+    { value: "", label: "Select" },
+    { value: "ms", label: "Ms" },
+    { value: "mr", label: "Mr" },
+    { value: "miss", label: "Miss" },
+    { value: "mrs", label: "Mrs" },
+  ]
+}