blood pressure input validation

pwa/src/components/PatientInfoForm.tsx

@@ -19,6 +19,7 @@ export default function Form(): ReactElement {
   const [visit, setVisit] = useState(0); // Default: No
   const [pregnant, setPregnant] = useState(0); // Default: No
   const [planning, setPlanning] = useState(0); // Default: No
+  const [bloodPressureValue, setbloodPressureValue] = useState("");
 
   // Data for Radio Buttons
   const sexValues = [
@@ -73,6 +74,13 @@ export default function Form(): ReactElement {
     }
   };
 
+  const validateBp = (value: string) => {
+    const newChar = value.slice(-1);
+    if (newChar.match(/[0-9]|\/|^$/) && value.length < 8) {
+      setbloodPressureValue(value);
+    }
+  };
+
   return (
     <div id="patient-info-wrapper">
       <TextareaItem
@@ -199,7 +207,12 @@ export default function Form(): ReactElement {
         Height (cm)
       </InputItem>
 
-      <InputItem type="number" placeholder="Blood Pressure" id="bp">
+      <InputItem
+        placeholder="Blood Pressure"
+        id="bp"
+        value={bloodPressureValue}
+        onChange={validateBp}
+      >
         BP
       </InputItem>