Merge pull request #1597 from harshitg927/issue-1596

Fix: Restrict First Name and Last Name Fields to Alphabetic Characters Only
DIGI-UW · Feb 24, 2025 · e48df5c · e48df5c
2 parents eb2d773 + 142ea9c
commit e48df5c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/frontend/src/components/patient/CreatePatientForm.js b/frontend/src/components/patient/CreatePatientForm.js
@@ -205,6 +205,20 @@ function CreatePatientForm(props) {
     );
   };
 
+  function handleFirstNameChange(event) {
+    const regex = /^[A-Za-z]*$/;
+    if (!regex.test(event.target.value)) {
+      event.target.value = event.target.value.replace(/[^A-Za-z]/g, "");
+    }
+  }
+
+  function handleLastNameChange(event) {
+    const regex = /^[A-Za-z]*$/;
+    if (!regex.test(event.target.value)) {
+      event.target.value = event.target.value.replace(/[^A-Za-z]/g, "");
+    }
+  }
+
   function fetchHealthDistrictsCallback(res) {
     setHealthDistricts(res);
   }
@@ -525,6 +539,7 @@ function CreatePatientForm(props) {
                       placeholder={intl.formatMessage({
                         id: "patient.information.lastname",
                       })}
+                      onChange={(e) => handleLastNameChange(e)}
                     />
                   )}
                 </Field>
@@ -544,6 +559,7 @@ function CreatePatientForm(props) {
                       placeholder={intl.formatMessage({
                         id: "patient.information.firstname",
                       })}
+                      onChange={(e) => handleFirstNameChange(e)}
                     />
                   )}
                 </Field>

diff --git a/frontend/src/components/patient/SearchPatientForm.js b/frontend/src/components/patient/SearchPatientForm.js
@@ -231,6 +231,20 @@ function SearchPatientForm(props) {
     setDob(date);
   };
 
+  const handleFirstNameChange = (event) => {
+    const regex = /^[A-Za-z]*$/;
+    if (!regex.test(event.target.value)) {
+      event.target.value = event.target.value.replace(/[^A-Za-z]/g, "");
+    }
+  };
+
+  const handleLastNameChange = (event) => {
+    const regex = /^[A-Za-z]*$/;
+    if (!regex.test(event.target.value)) {
+      event.target.value = event.target.value.replace(/[^A-Za-z]/g, "");
+    }
+  };
+
   const patientSelected = (e) => {
     const patientSelected = patientSearchResults.find((patient) => {
       return patient.patientID == e.target.id;
@@ -349,6 +363,7 @@ function SearchPatientForm(props) {
                         defaultMessage: "Last Name",
                       })}
                       id={field.name}
+                      onChange={(e) => handleLastNameChange(e)}
                     />
                   )}
                 </Field>
@@ -366,6 +381,7 @@ function SearchPatientForm(props) {
                         defaultMessage: "First Name",
                       })}
                       id={field.name}
+                      onChange={(e) => handleFirstNameChange(e)}
                     />
                   )}
                 </Field>