From 6cb0871d3451f465d0aeb11ac4ac28164c59b354 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Thu, 27 Apr 2023 02:37:04 +0100
Subject: [PATCH] added html validation

---
 .../Helpers/Inputs/InputCom/index.jsx         | 52 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx
index 9dd8efc..707d0cc 100644
--- a/src/components/Helpers/Inputs/InputCom/index.jsx
+++ b/src/components/Helpers/Inputs/InputCom/index.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import Icons from "../../Icons";
 import { Link } from "react-router-dom";
 
@@ -16,6 +16,53 @@ export default function InputCom({
   disable,
   blurHandler,
 }) {
+  const inputRef = useRef(null)
+  // Entry Validation
+  // for Min Length:
+  const minLengthValidation = () => {
+    if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
+      return 7
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
+      return 5
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
+      return 8
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
+      return 1
+    }
+  }
+
+  // for MaxLength
+  const maxLengthValidation = () => {
+    if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
+      return 35
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
+      return 49
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
+      return 15
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
+      return 9  
+    }
+  }
   return (
     <div className="input-com">
       <div className="flex items-center justify-between">
@@ -38,6 +85,9 @@ export default function InputCom({
           type={type}
           id={name}
           name={name}
+          minLength={minLengthValidation()}
+          maxLength={maxLengthValidation()}
+          ref={inputRef}
           readOnly={disable}
           onBlur={blurHandler}
         />