domain validation FE (#415)

Author: Princekumarofficial

src/components/loginForms/recruiterSignup.tsx

@@ -98,6 +98,7 @@ const VALIDATION_MESSAGES = {
   MAX_VALUE: (max: number) => `Value must not exceed ${max}`,
   INVALID_YEAR: "Please enter a valid year",
   INVALID_SIZE: "Please enter a valid company size",
+  DOMAINS_REQUIRED: "Please select at least one domain",
 };
 
 interface ValidationErrors {
@@ -183,6 +184,14 @@ export default function RecruiterSignup() {
     loadData();
   }, []);
 
+  // Validation function for domains array
+  const validateDomainsField = (domains: string[]): string => {
+    if (createCompany && (!domains || domains.length === 0)) {
+      return VALIDATION_MESSAGES.DOMAINS_REQUIRED;
+    }
+    return "";
+  };
+
   // Real-time validation functions
   const validateField = (field: string, value: string): string => {
     if (!value.trim() && isRequiredField(field)) {
@@ -291,7 +300,7 @@ export default function RecruiterSignup() {
   const isRequiredField = (field: string): boolean => {
     const requiredPersonalFields = ["name", "email", "contact", "designation"];
     const requiredCompanyFields = createCompany
-      ? ["companyName", "category", "line1", "city", "state", "country"]
+      ? ["companyName", "category", "line1", "city", "state", "country", "domains"]
       : ["companyId"];
 
     return (
@@ -324,6 +333,11 @@ export default function RecruiterSignup() {
 
   const handleDomainsChange = (value: string[]) => {
     setCompanyInfo((prev) => ({ ...prev, domains: value }));
+    
+    // Real-time validation for domains
+    const error = validateDomainsField(value);
+    setValidationErrors((prev) => ({ ...prev, domains: error }));
+    setTouched((prev) => ({ ...prev, domains: true }));
   };
 
   const handleAddressChange = (field: string, value: string) => {
@@ -381,6 +395,13 @@ export default function RecruiterSignup() {
           isValid = false;
         }
       });
+
+      // Validate domains
+      const domainsError = validateDomainsField(companyInfo.domains);
+      if (domainsError) {
+        errors.domains = domainsError;
+        isValid = false;
+      }
     } else {
       // Validate company selection
       if (!companyInfo.companyId) {
@@ -951,13 +972,20 @@ export default function RecruiterSignup() {
                 </div>
                 <div className="space-y-2">
                   <Label className="text-sm font-medium text-gray-700">
-                    Domains
+                    Domains *
                   </Label>
                   <MultiSelect
                     givenOptions={jaf?.domains || []}
                     formData={companyInfo.domains}
                     setFormData={handleDomainsChange}
+                    hasError={isFieldInvalid("domains")}
                   />
+                  {getFieldError("domains") && (
+                    <div className="flex items-center gap-1 text-red-500 text-sm">
+                      <AlertCircle className="h-3 w-3" />
+                      {getFieldError("domains")}
+                    </div>
+                  )}
                 </div>
               </div>
 

src/components/ui/multiselect.tsx

@@ -1,6 +1,13 @@
 import Select from "react-select";
 
-export const MultiSelect = ({ givenOptions, formData, setFormData }) => {
+interface MultiSelectProps {
+  givenOptions: string[];
+  formData: string[];
+  setFormData: (data: string[]) => void;
+  hasError?: boolean;
+}
+
+export const MultiSelect = ({ givenOptions, formData, setFormData, hasError = false }: MultiSelectProps) => {
   const handleChange = (selectedOptions) => {
     setFormData(selectedOptions.map((option) => option.value));
   };
@@ -15,13 +22,52 @@ export const MultiSelect = ({ givenOptions, formData, setFormData }) => {
     label: option,
   }));
 
+  const customStyles = {
+    control: (provided, state) => ({
+      ...provided,
+      borderColor: hasError ? '#ef4444' : state.isFocused ? '#3b82f6' : '#d1d5db',
+      borderWidth: '1px',
+      boxShadow: hasError 
+        ? '0 0 0 1px #ef4444' 
+        : state.isFocused 
+        ? '0 0 0 1px #3b82f6' 
+        : 'none',
+      '&:hover': {
+        borderColor: hasError ? '#ef4444' : '#3b82f6',
+      },
+      minHeight: '44px', // h-11 equivalent
+    }),
+    placeholder: (provided) => ({
+      ...provided,
+      color: '#6b7280',
+    }),
+    multiValue: (provided) => ({
+      ...provided,
+      backgroundColor: hasError ? '#fef2f2' : '#f3f4f6',
+      borderColor: hasError ? '#fecaca' : '#e5e7eb',
+    }),
+    multiValueLabel: (provided) => ({
+      ...provided,
+      color: hasError ? '#991b1b' : '#374151',
+    }),
+    multiValueRemove: (provided) => ({
+      ...provided,
+      color: hasError ? '#991b1b' : '#6b7280',
+      '&:hover': {
+        backgroundColor: hasError ? '#fecaca' : '#e5e7eb',
+        color: hasError ? '#7f1d1d' : '#374151',
+      },
+    }),
+  };
+
   return (
     <Select
       isMulti
       value={values}
       onChange={handleChange}
       options={options}
-      className="w-full text-sm text-gray-800 bg-white border border-gray-200 rounded-lg focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400"
+      styles={customStyles}
+      className="w-full text-sm"
       placeholder="Select multiple options..."
     />
   );