added html validation

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}
         />