fix: trigger reservation form validators on input

Author: joonatank

apps/ui/components/reservation/Step0.tsx

@@ -5,7 +5,7 @@
 import type { OptionType } from "common/types/common";
 import { IconArrowLeft, IconArrowRight } from "hds-react";
 import { useFormContext } from "react-hook-form";
-import React from "react";
+import React, { useState } from "react";
 import { Trans, useTranslation } from "next-i18next";
 import styled from "styled-components";
 import { fontMedium, fontRegular } from "common/src/common/typography";
@@ -75,7 +75,7 @@ const Step0 = ({
 }: Props): JSX.Element => {
   const { t } = useTranslation();
 
-  const [isDialogOpen, setIsDialogOpen] = React.useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
 
   const termsOfUse = getTranslation(reservationUnit, "termsOfUse");
 

apps/ui/pages/reservation-unit/[...params].tsx

@@ -174,7 +174,7 @@ function ReservationUnitReservation(props: PropsNarrowed): JSX.Element | null {
   // TODO is defaultValues correct? it's prefilled from the profile data and we are not refetching at any point.
   // If we would refetch values would be more correct with reset hook.
   // Also if this is ever initialised without the data it will not prefill the form.
-  const form = useForm<Inputs>({ defaultValues, mode: "onBlur" });
+  const form = useForm<Inputs>({ defaultValues, mode: "onChange" });
   const { handleSubmit, watch } = form;
 
   const reserveeType = watch("reserveeType");