added form validations (#621)

Co-authored-by: JR Frazier <justinfrazier@jrs-mbp-2.lan>

src/components/forms/apply-form.tsx

@@ -6,6 +6,7 @@ import Input from "@ui/form-elements/input";
 import Button from "@ui/button";
 import { hasKey } from "@utils/methods";
 import Feedback from "@ui/form-elements/feedback";
+import { linkedinRegex, githubRegex } from "@utils/formValidations";
 
 interface IFormValues {
     firstName: string;
@@ -280,6 +281,11 @@ const ApplyForm = () => {
                         showState={!!hasKey(errors, "linkedInAccountName")}
                         {...register("linkedInAccountName", {
                             required: "LinkedIn Account Name is required",
+                            pattern: {
+                                value: linkedinRegex,
+                                message:
+                                    "Please enter your Linkedin profile URL. For example, linkedin.com/in/your-name",
+                            },
                         })}
                     />
                 </div>
@@ -303,6 +309,11 @@ const ApplyForm = () => {
                         showState={!!hasKey(errors, "githubAccountName")}
                         {...register("githubAccountName", {
                             required: "GitHub Account Name is required",
+                            pattern: {
+                                value: githubRegex,
+                                message:
+                                    "Please enter your Github profile URL. For example, github.com/your-name",
+                            },
                         })}
                     />
                 </div>

src/components/forms/mentor-form.tsx

@@ -6,6 +6,7 @@ import Input from "@ui/form-elements/input";
 import Button from "@ui/button";
 import { hasKey } from "@utils/methods";
 import Feedback from "@ui/form-elements/feedback";
+import { validateProfileLink } from "@utils/formValidations";
 
 interface IFormValues {
     name: string;
@@ -159,6 +160,7 @@ const MentorForm = () => {
                         {...register("github-portfolio-or-linkedin", {
                             required:
                                 "GitHub Portfolio or LinkedIn is required",
+                            validate: validateProfileLink,
                         })}
                     />
                 </div>

src/utils/formValidations.ts

@@ -0,0 +1,28 @@
+// ^(https?:\/\/)? : Matches an optional "http" or "https" at the start, followed by "://". The "?" makes it optional.
+// (www\.)? : Matches the optional "www." subdomain.
+// github\.com\/ : Matches "github.com/" exactly. The backslash escapes the dot.
+// [A-Za-z0-9_-]+ : Matches one or more alphanumeric characters, underscores, or hyphens (used for GitHub usernames).
+// \/? : Matches an optional trailing forward slash.
+// $ : End of the string, ensuring there are no extra characters after the valid GitHub username.
+
+export const githubRegex: RegExp =
+    /^(https?:\/\/)?(www\.)?github\.com\/[A-Za-z0-9_-]+\/?$/;
+
+// ^(https?:\/\/)? : Matches an optional "http" or "https" at the start, followed by "://". The "?" makes it optional.
+// (www\.)? : Matches the optional "www." subdomain.
+// linkedin\.com\/in\/ : Matches "linkedin.com/in/" exactly. The backslash escapes the dots.
+// [A-Za-z0-9_-]+ : Matches one or more alphanumeric characters, underscores, or hyphens (used for LinkedIn profile URLs).
+// \/? : Matches an optional trailing forward slash.
+// $ : End of the string, ensuring there are no extra characters after the valid LinkedIn profile URL.
+export const linkedinRegex: RegExp =
+    /^(https?:\/\/)?(www\.)?linkedin\.com\/in\/[A-Za-z0-9_-]+\/?$/;
+
+export function validateProfileLink(url: string): string | boolean {
+    if (githubRegex.test(url)) {
+        return true;
+    } else if (linkedinRegex.test(url)) {
+        return true;
+    } else {
+        return "The value entered is not a valid Linkedin or Github profile link";
+    }
+}