187-add-form-validation-for-url-text-inputs

src/components/TextInput/TextInput.tsx

@@ -4,6 +4,7 @@ import {
     getTextInputStyles,
     getTextInputDescriptionStyles,
 } from "./TextInput.styles";
+import React, { useState } from 'react';
 
 export interface TextInputProps
     extends TextInputStylesProps,
@@ -28,6 +29,11 @@ export interface TextInputProps
      * Description of the input field.
      */
     description?: string;
+
+    /**
+     * Function to validate the input value.
+     */
+    validate?: (value: string) => boolean;
 }
 
 export const TextInput: React.FC<TextInputProps> = ({
@@ -37,9 +43,20 @@ export const TextInput: React.FC<TextInputProps> = ({
     description,
     srLabel = false,
     required,
+    validate,
     ...inputProps
 }) => {
     const describedby = `text-input-description-${inputProps.id}`;
+    const [error, setError] = useState<string | null>(null);
+
+    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+        if (validate && !validate(event.target.value)) {
+            setError("Invalid URL format.");
+        } else {
+            setError(null);
+        }
+    };
+
     return (
         <div>
             <label
@@ -57,8 +74,12 @@ export const TextInput: React.FC<TextInputProps> = ({
                         describedby,
                     ].join(" ")}
                     className={getTextInputStyles({ invalid, className })}
+                    onBlur={handleBlur}
                 />
             </div>
+            {error && (
+                <p className="text-red-500 text-sm mt-1">{error}</p>
+            )}
             {description && (
                 <p
                     className={getTextInputDescriptionStyles({ invalid })}

src/components/forms/hackerApplication.ts

@@ -12,6 +12,11 @@ import {
     volunteerSpecificOptions,
 } from "@data";
 import type { FormInput } from "./types";
+import * as z from 'zod';
+
+function isValidUrl(url: string) {
+    return z.string().url().safeParse(url).success;
+}
 
 export const hackerAppFormInputs: FormInput[] = [
     {
@@ -150,6 +155,7 @@ export const mentorSpecificForm: FormInput[] = [
             required: false,
             id: "linkedin-url",
             placeholder: "https://linkedin.com/in/john-smith",
+            validate: (value: string) => isValidUrl(value) || value === "",
         },
         name: "linkedinUrl",
     },
@@ -160,6 +166,7 @@ export const mentorSpecificForm: FormInput[] = [
             required: false,
             id: "github-url",
             placeholder: "https://github.com/SherRao",
+            validate: (value: string) => isValidUrl(value) || value === "",
         },
         name: "githubUrl",
     },
@@ -170,6 +177,7 @@ export const mentorSpecificForm: FormInput[] = [
             required: false,
             id: "personal-website-url",
             placeholder: "https://hawkhacks.ca",
+            validate: (value: string) => isValidUrl(value) || value === "",
         },
         name: "personalWebsiteUrl",
     },

src/pages/Application/Application.page.tsx

@@ -62,6 +62,10 @@ function getLogEventName(component: string) {
     return "dev_app_interaction"; // not logging the different components becuase it will fill the reports with spam
 }
 
+function isValidUrl(url: string) {
+    return z.string().url().safeParse(url).success;
+}
+
 export const ApplicationPage = () => {
     // TODO: save steps in firebase to save progress
     const [steps, setSteps] = useState<Step[]>([
@@ -125,6 +129,16 @@ export const ApplicationPage = () => {
     const validate = () => {
         clearErrors();
 
+        // Check URL validation status
+        let urlFields: (keyof ApplicationData)[] = ['linkedinUrl', 'githubUrl', 'personalWebsiteUrl'] as const;
+        for (let field of urlFields) {
+            const fieldValue = application[field as keyof ApplicationData] as string;
+            if (fieldValue && !isValidUrl(fieldValue)) {
+                setErrors((prev) => [...prev, `${field} has an invalid URL.`]);
+                return false;
+            }
+        }
+
         // validate step form
         const validateFn = stepValidations[activeStep];