Merged in fix/STAY-15-validation-messages (pull request #3203)

fix: Show correct validation errors in additionalInfoForm

* fix: Show correct validation errors in additionalInfoForm


Approved-by: Bianca Widstam
Approved-by: Erik Tiekstra

apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx

@@ -31,6 +31,7 @@ export default function AdditionalInfoForm({
   const intl = useIntl()
   const form = useForm<AdditionalInfoFormSchema>({
     resolver: zodResolver(additionalInfoFormSchema),
+    defaultValues: { firstName: "", email: "" },
     mode: "all",
     criteriaMode: "all",
     reValidateMode: "onChange",

apps/scandic-web/components/HotelReservation/FindMyBooking/schema.ts

@@ -13,6 +13,7 @@ const findMyBookingErrors = {
   BOOKING_NUMBER_REQUIRED: "BOOKING_NUMBER_REQUIRED",
   FIRST_NAME_REQUIRED: "FIRST_NAME_REQUIRED",
   LAST_NAME_REQUIRED: "LAST_NAME_REQUIRED",
+  EMAIL_INVALID: "EMAIL_INVALID",
   EMAIL_REQUIRED: "EMAIL_REQUIRED",
 } as const
 
@@ -22,7 +23,11 @@ const additionalInfoFormSchema = z.object({
     .trim()
     .max(250)
     .min(1, findMyBookingErrors.FIRST_NAME_REQUIRED),
-  email: z.string().max(250).email(findMyBookingErrors.EMAIL_REQUIRED),
+  email: z
+    .string()
+    .max(250)
+    .min(1, findMyBookingErrors.EMAIL_REQUIRED)
+    .email(findMyBookingErrors.EMAIL_INVALID),
 })
 
 const findMyBookingFormSchema = additionalInfoFormSchema.extend({

apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx

@@ -36,7 +36,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   ref
 ) {
   const intl = useIntl()
-  const { control, formState } = useFormContext()
+  const { control } = useFormContext()
   const numberAttributes: HTMLAttributes<HTMLInputElement> = {}
   if (type === "number") {
     numberAttributes.onWheel = function (evt: WheelEvent<HTMLInputElement>) {
@@ -50,7 +50,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       control={control}
       name={name}
       rules={registerOptions}
-      render={({ field, fieldState }) => (
+      render={({ field, fieldState, formState }) => (
         <TextField
           aria-label={ariaLabel}
           className={className}