use regex to validate name on frontend

web/public/locales/en/views/faceLibrary.json

@@ -1,7 +1,8 @@
 {
   "description": {
     "addFace": "Walk through adding a new collection to the Face Library.",
-    "placeholder": "Enter a name for this collection"
+    "placeholder": "Enter a name for this collection",
+    "invalidName": "Invalid name. Names can only include letters, numbers, spaces, apostrophes, underscores, and hyphens."
   },
   "details": {
     "person": "Person",

web/src/components/overlay/detail/FaceCreateWizardDialog.tsx

@@ -119,6 +119,8 @@ export default function CreateFaceWizardDialog({
               setName(name);
               setStep(1);
             }}
+            regexPattern={/^[\p{L}\p{N}\s'_-]{1,50}$/u}
+            regexErrorMessage={t("description.invalidName")}
           >
             <div className="flex justify-end py-2">
               <Button variant="select" type="submit">