Rework name regex on patient search page (#63)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

query-connector/src/app/query/components/SearchForm.tsx

@@ -79,6 +79,10 @@ const SearchForm: React.FC<SearchFormProps> = ({
     [setUseCase],
   );
 
+  const nameRegex = "^[A-Za-z\u00C0-\u024F\u1E00-\u1EFF\\-'. ]+$";
+  const nameRuleHint =
+    "Enter a name using only letters, hyphens, apostrophes, spaces, or periods.";
+
   async function HandleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (!fhirServer) {
@@ -191,9 +195,10 @@ const SearchForm: React.FC<SearchFormProps> = ({
               </Label>
               <TextInput
                 id="firstName"
+                title={nameRuleHint}
                 name="first_name"
                 type="text"
-                pattern="^[A-Za-z ]+$"
+                pattern={nameRegex}
                 value={firstName}
                 onChange={(event) => {
                   setFirstName(event.target.value);
@@ -210,9 +215,10 @@ const SearchForm: React.FC<SearchFormProps> = ({
               </Label>
               <TextInput
                 id="lastName"
+                title={nameRuleHint}
                 name="last_name"
                 type="text"
-                pattern="^[A-Za-z ]+$"
+                pattern={nameRegex}
                 value={lastName}
                 onChange={(event) => {
                   setLastName(event.target.value);