diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx
index 7b1500bf2..6599103ec 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx
@@ -30,7 +30,7 @@ export const DobField: React.FC = () => {
const [birthdate, birthdateMeta] = useField('birthdate');
const [yearsEstimated, yearsEstimateMeta] = useField('yearsEstimated');
const [monthsEstimated, monthsEstimateMeta] = useField('monthsEstimated');
- const { setFieldValue } = useContext(PatientRegistrationContext);
+ const { setFieldValue, setFieldTouched } = useContext(PatientRegistrationContext);
const today = new Date();
const onToggle = useCallback(
@@ -39,6 +39,7 @@ export const DobField: React.FC = () => {
setFieldValue('birthdate', '');
setFieldValue('yearsEstimated', 0);
setFieldValue('monthsEstimated', '');
+ setFieldTouched('birthdateEstimated', true, false);
},
[setFieldValue],
);
@@ -46,8 +47,9 @@ export const DobField: React.FC = () => {
const onDateChange = useCallback(
(birthdate: Date) => {
setFieldValue('birthdate', birthdate);
+ setFieldTouched('birthdate', true, false);
},
- [setFieldValue],
+ [setFieldValue, setFieldTouched],
);
const onEstimatedYearsChange = useCallback(
@@ -80,7 +82,10 @@ export const DobField: React.FC = () => {
setFieldValue('yearsEstimated', years);
setFieldValue('monthsEstimated', months > 0 ? months : '');
setFieldValue('birthdate', calcBirthdate(years, months, dateOfBirth));
- }, [setFieldValue, monthsEstimateMeta, yearsEstimateMeta, dateOfBirth]);
+ setFieldTouched('yearsEstimated', true, false);
+ setFieldTouched('monthsEstimated', true, false);
+ setFieldTouched('birthdate', true, false);
+ }, [setFieldValue, setFieldTouched, monthsEstimateMeta, yearsEstimateMeta, dateOfBirth]);
return (
@@ -103,6 +108,7 @@ export const DobField: React.FC = () => {
id="birthdate"
{...birthdate}
onChange={onDateChange}
+ onBlur={() => setFieldTouched('birthdate', true, false)}
maxDate={today}
labelText={t('dateOfBirthLabelText', 'Date of birth')}
isInvalid={!!(birthdateMeta.touched && birthdateMeta.error)}
@@ -125,7 +131,11 @@ export const DobField: React.FC = () => {
min={0}
required
{...yearsEstimated}
- onBlur={updateBirthdate}
+ onBlur={(e) => {
+ yearsEstimated.onBlur(e);
+ setFieldTouched('yearsEstimated', true, false);
+ updateBirthdate();
+ }}
/>
@@ -141,7 +151,11 @@ export const DobField: React.FC = () => {
min={0}
{...monthsEstimated}
required={!yearsEstimateMeta.value}
- onBlur={updateBirthdate}
+ onBlur={(e) => {
+ monthsEstimated.onBlur(e);
+ setFieldTouched('monthsEstimated', true, false);
+ updateBirthdate();
+ }}
/>
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx
index 9052b0574..75fa4663a 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx
@@ -11,11 +11,12 @@ export const GenderField: React.FC = () => {
const { fieldConfigurations } = useConfig();
const { t } = useTranslation();
const [field, meta] = useField('gender');
- const { setFieldValue } = useContext(PatientRegistrationContext);
+ const { setFieldValue, setFieldTouched } = useContext(PatientRegistrationContext);
const fieldConfigs = fieldConfigurations?.gender;
const setGender = (gender: string) => {
setFieldValue('gender', gender);
+ setFieldTouched('gender', true, false);
};
/**
* DO NOT REMOVE THIS COMMENT HERE, ADDS TRANSLATION FOR SEX OPTIONS
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.test.tsx
index a83591b60..92fbf407a 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.test.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.test.tsx
@@ -12,6 +12,7 @@ jest.mock('react', () => ({
...(jest.requireActual('react') as any),
useContext: jest.fn(() => ({
setFieldValue: jest.fn(),
+ setFieldTouched: jest.fn(),
})),
}));
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx
index 4095e4440..f2b4e2147 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx
@@ -21,7 +21,7 @@ function checkNumber(value: string) {
export const NameField = () => {
const { t } = useTranslation();
- const { setCapturePhotoProps, currentPhoto, setFieldValue } = useContext(PatientRegistrationContext);
+ const { setCapturePhotoProps, currentPhoto, setFieldValue, setFieldTouched } = useContext(PatientRegistrationContext);
const {
fieldConfigurations: {
name: {
@@ -48,6 +48,7 @@ export const NameField = () => {
imageData: dataUri,
dateTime: photoDateTime,
});
+ setFieldTouched('photo', true, false);
}
},
[setCapturePhotoProps],
@@ -63,6 +64,9 @@ export const NameField = () => {
setFieldValue('familyName', defaultUnknownFamilyName);
setUnknownPatient('true');
}
+ setFieldTouched('givenName', true);
+ setFieldTouched('familyName', true);
+ setFieldTouched(`attributes.${unidentifiedPatientAttributeTypeUuid}`, true, false);
};
const firstNameField = (
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx
index 2db6ba576..55b250bda 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx
@@ -161,7 +161,7 @@ export const PatientRegistration: React.FC = ({ savePa
onSubmit={onFormSubmit}>
{(props) => (