Make type and ou choices required in new role form

Adding a role without selecting either of these makes no sense, and will
be refused by the backend accordingly.

frontend/public/locales/en/common.json

@@ -116,6 +116,8 @@
     "invalidEmail": "Invalid e-mail address",
     "passportNumberRequired": "Passport number required",
     "mobilePhoneRequired": "Mobile phone is required",
+    "typeMustBeChosen": "Role is required",
+    "ouMustBeChosen": "Organisation is required",
     "startDateMustBeSet": "Start date must be set",
     "startDateMustBeBeforeEndDate": "Start date has to be before end date",
     "phoneNumberAndCountryCode": "Both country code and phone number must be set",

frontend/public/locales/nb/common.json

@@ -116,6 +116,8 @@
     "invalidEmail": "Ugyldig e-postadresse",
     "passportNumberRequired": "Passnummer er obligatorisk",
     "mobilePhoneRequired": "Mobilnummer er obligatorisk",
+    "typeMustBeChosen": "Gjesterolle er obligatorisk",
+    "ouMustBeChosen": "Organisasjon er obligatorisk",
     "startDateMustBeSet": "Startdato må være satt",
     "startDateMustBeBeforeEndDate": "Startdato må være før sluttdato",
     "phoneNumberAndCountryCode": "Både landkode og telefonnummer må være satt",

frontend/public/locales/nn/common.json

@@ -116,6 +116,8 @@
     "invalidEmail": "Ugyldig e-postadresse",
     "passportNumberRequired": "Passnummer er obligatorisk",
     "mobilePhoneRequired": "Mobilnummer er obligatorisk",
+    "typeMustBeChosen": "Gjesterolle er obligatorisk",
+    "ouMustBeChosen": "Organisasjon er obligatorisk",
     "startDateMustBeSet": "Startdato må vere satt",
     "startDateMustBeBeforeEndDate": "Startdato må vere før sluttdato",
     "phoneNumberAndCountryCode": "Både landkode og telefonnummer må vere satt",

frontend/src/routes/sponsor/guest/newGuestRole/index.tsx

@@ -190,41 +190,68 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
       </Typography>
       <form onSubmit={onSubmit}>
         <Stack spacing={2}>
-          <FormControl>
-            <InputLabel id="roletype-select-label">
-              {t('input.roleType')}
-            </InputLabel>
-            <Select
-              id="roletype-select"
-              defaultValue=""
-              value={roleTypeChoice}
-              error={!!errors.type}
-              label={t('input.roleType')}
-              onChange={handleRoleTypeChange}
-            >
-              {(roleTypes === undefined ? [] : roleTypes)
-                .sort(roleTypeSort())
-                .map((rt) => rolesToItem(rt))}
-            </Select>
-          </FormControl>
+          <Controller
+            name="type"
+            control={control}
+            rules={{ required: true }}
+            render={() => (
+              <FormControl>
+                <InputLabel id="roletype-select-label">
+                  {t('input.roleType')}
+                </InputLabel>
+                <Select
+                  id="roletype-select"
+                  defaultValue=""
+                  value={roleTypeChoice}
+                  error={!!errors.type}
+                  label={t('input.roleType')}
+                  onChange={handleRoleTypeChange}
+                >
+                  {(roleTypes === undefined ? [] : roleTypes)
+                    .sort(roleTypeSort())
+                    .map((rt) => rolesToItem(rt))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          {errors.type && errors.type.type === 'required' && (
+            <Box sx={{ typography: 'caption', color: 'error.main' }}>
+              {t('validation.typeMustBeChosen')}
+            </Box>
+          )}
+
+          <Controller
+            name="orgunit"
+            control={control}
+            rules={{ required: true }}
+            render={() => (
+              <FormControl>
+                <InputLabel id="ou-select-label-id">
+                  {t('common:ou')}
+                </InputLabel>
+                <Select
+                  labelId="ou-select-label"
+                  id="ou-select-label"
+                  defaultValue=""
+                  value={ouChoice.toString()}
+                  label={t('common:ou')}
+                  onChange={handleOuChange}
+                >
+                  {ous !== undefined &&
+                    ous.length > 0 &&
+                    ous
+                      .sort(i18n.language === 'en' ? enSort : nbSort)
+                      .map((ou) => ouToItem(ou))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          {errors.orgunit && errors.orgunit.type === 'required' && (
+            <Box sx={{ typography: 'caption', color: 'error.main' }}>
+              {t('validation.ouMustBeChosen')}
+            </Box>
+          )}
 
-          <FormControl>
-            <InputLabel id="ou-select-label-id">{t('common:ou')}</InputLabel>
-            <Select
-              labelId="ou-select-label"
-              id="ou-select-label"
-              defaultValue=""
-              value={ouChoice.toString()}
-              label={t('common:ou')}
-              onChange={handleOuChange}
-            >
-              {ous !== undefined &&
-                ous.length > 0 &&
-                ous
-                  .sort(i18n.language === 'en' ? enSort : nbSort)
-                  .map((ou) => ouToItem(ou))}
-            </Select>
-          </FormControl>
           <Controller
             name="start_date"
             control={control}