Resolve inconsistent error handling and message linking across form i…

…nputs and radio button. (#5843)
public-ui · Feb 6, 2024 · 8cc6bdf · 8cc6bdf
2 parents 483ae24 + ab464ea
commit 8cc6bdf
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git a/packages/samples/react/src/scenarios/appointment-form/AppointmentForm.tsx b/packages/samples/react/src/scenarios/appointment-form/AppointmentForm.tsx
@@ -49,12 +49,12 @@ const districtSchema = {
 };
 const personalInformationSchema = {
 	salutation: Yup.string().required('Bitte Anrede auswählen.'),
-	name: Yup.string().required('Bitte Name eingeben.'),
+	name: Yup.string().required('Bitte Vor- und Zuname eingeben.'),
 	company: Yup.string().when('salutation', {
 		is: (salutation: string) => salutation === 'Firma',
-		then: (schema) => schema.required('Bitte Firmenname angeben.'),
+		then: (schema) => schema.required('Bitte Firma angeben.'),
 	}),
-	email: Yup.string().required('Bitte E-Mail-Adresse eingeben.'),
+	email: Yup.string().required('Bitte E-Mail eingeben.'),
 };
 const availableAppointmentsSchema = {
 	date: Yup.string().required('Bitte Datum eingeben.'),

diff --git a/packages/samples/react/src/scenarios/appointment-form/DistrictForm.tsx b/packages/samples/react/src/scenarios/appointment-form/DistrictForm.tsx
@@ -57,12 +57,14 @@ export function DistrictForm() {
 							_error={form.errors.district || ''}
 							_touched={form.touched.district}
 							_required
+							onBlur={() => {
+								void form.setFieldTouched('district', true);
+							}}
 							_on={{
 								onChange: (event, values: unknown) => {
 									// Select und Radio setzen den Wert immer initial.
 									if (event.target) {
 										const [value] = values as [FormValues['district']];
-										void form.setFieldTouched('district', true);
 										void form.setFieldValue('district', value, true);
 									}
 								},

diff --git a/packages/samples/react/src/scenarios/appointment-form/PersonalInformationForm.tsx b/packages/samples/react/src/scenarios/appointment-form/PersonalInformationForm.tsx
@@ -60,7 +60,6 @@ export function PersonalInformationForm() {
 								onChange: (event, values: unknown) => {
 									if (event.target) {
 										const [value] = values as [FormValues['salutation']];
-										void form.setFieldTouched('salutation', true);
 										void form.setFieldValue('salutation', value, true);
 									}
 								},
@@ -86,7 +85,6 @@ export function PersonalInformationForm() {
 									_on={{
 										onChange: (event, value: unknown) => {
 											if (event.target) {
-												void form.setFieldTouched('company', true);
 												void form.setFieldValue('company', value, true);
 											}
 										},
@@ -113,7 +111,6 @@ export function PersonalInformationForm() {
 								_on={{
 									onChange: (event, value: unknown) => {
 										if (event.target) {
-											void form.setFieldTouched('name', true);
 											void form.setFieldValue('name', value, true);
 										}
 									},
@@ -139,7 +136,6 @@ export function PersonalInformationForm() {
 								_on={{
 									onChange: (event, value: unknown) => {
 										if (event.target) {
-											void form.setFieldTouched('email', true);
 											void form.setFieldValue('email', value, true);
 										}
 									},