fix: require email and phonenumber fields

pages/persoonsgegevens/[person].tsx

@@ -27,7 +27,7 @@
 import React, { useCallback, useContext, useEffect, useId, useRef, useState } from "react";
 import { useForm, UseFormRegister } from "react-hook-form";
 import Skeleton from "react-loading-skeleton";
-import { Aside, Checkbox2, OptionalIndicator, PageContentMain, ReservationCard } from "../../src/components";
+import { Aside, Checkbox2, PageContentMain, ReservationCard } from "../../src/components";
 import { AddressDataList } from "../../src/components/huwelijksplanner/AddressDataList";
 import { PageFooterTemplate } from "../../src/components/huwelijksplanner/PageFooterTemplate";
 import { PageHeaderTemplate } from "../../src/components/huwelijksplanner/PageHeaderTemplate";
@@ -205,23 +205,20 @@
                   <p>Deze gegevens kun je zelf invullen of wijzigen.</p>
                   <FormField>
                     <p className="utrecht-form-field__label">
-                      <FormLabel htmlFor="tel">
-                        {t("form:tel")} <OptionalIndicator title={t("form:optional")} />
-                      </FormLabel>
+                      <FormLabel htmlFor="tel">{t("form:tel")}</FormLabel>
                     </p>
                     <Textbox
                       className="utrecht-form-field__input"
                       id="tel"
                       type="tel"
                       autoComplete="tel"
-                      {...register("phoneNumber")}
+                      invalid={formState.errors.phoneNumber && formState.isSubmitted}
+                      {...register("phoneNumber", { required: true })}
                     />
                   </FormField>
                   <FormField>
                     <p className="utrecht-form-field__label">
-                      <FormLabel htmlFor="email">
-                        {t("form:email")} <OptionalIndicator title={t("form:optional")} />
-                      </FormLabel>
+                      <FormLabel htmlFor="email">{t("form:email")}</FormLabel>
                     </p>
                     <FormFieldDescription id="email-description">
                       We sturen je een bevestiging naar dit e-mailadres.
@@ -234,7 +231,8 @@
                       type="email"
                       autoComplete="email"
                       aria-describedby="email-description"
-                      {...register("email")}
+                      invalid={formState.errors.email && formState.isSubmitted}
+                      {...register("email", { required: true })}
                     />
                   </FormField>
                   <DeclarationCheckboxGroup register={register} checkboxData={checkboxData} />
@@ -356,7 +354,7 @@
 };
 
 const mapToContactObject = (email?: string, phoneNumber?: string) => {
   const contactObject: any = {};
 
   if (email) {
     contactObject.emails = [