Add front end validation

frontend/public/locales/en/common.json

@@ -131,6 +131,7 @@
     "nationalIdNumberRequired": "Norwegian national ID number required",
     "roleTypeRequired": "Role type is required",
     "roleEndRequired": "Role end date is required",
+    "invalidEndDate": "Chosen role must have an earlier end date",
     "emailRequired": "E-mail is required",
     "consentRequired": "This consent is required",
     "invalidMobilePhoneNumber": "Invalid phone number",

frontend/public/locales/nb/common.json

@@ -131,6 +131,7 @@
     "nationalIdNumberRequired": "Fødselsnummer/D-nummer er obligatorisk",
     "roleTypeRequired": "Rolletype er obligatorisk",
     "roleEndRequired": "Sluttdato for rolle er obligatorisk",
+    "invalidEndDate": "Valgt rolle må ha en tidligere sluttdato",
     "emailRequired": "E-post er obligatorisk",
     "consentRequired": "Dette samtykket er obligatorisk",
     "invalidMobilePhoneNumber": "Ugyldig telefonnummer",

frontend/public/locales/nn/common.json

@@ -131,6 +131,7 @@
     "nationalIdNumberRequired": "Fødselsnummer/D-nummer er påkrevd",
     "roleTypeRequired": "Rolletype er påkrevd",
     "roleEndRequired": "Sluttdato for rolle er påkrevd",
+    "invalidEndDate": "Vald rolle må ha ein tidlegare sluttdato",
     "emailRequired": "E-post er påkrevd",
     "consentRequired": "Dette samtykket er påkrevd",
     "invalidMobilePhoneNumber": "Ugyldig telefonnummer",

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

@@ -305,6 +305,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
             control={control}
             rules={{
               required: true,
+              validate: () => Number(getValues('end_date')) <= Number(maxDate),
             }}
             render={({ field }) => (
               <DatePicker
@@ -328,6 +329,11 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
               {t('validation.roleEndRequired')}
             </Box>
           )}
+          {errors.end_date && errors.end_date.type === 'validate' && (
+            <Box sx={{ typography: 'caption', color: 'error.main' }}>
+              {t('validation.invalidEndDate')}
+            </Box>
+          )}
           {displayContactAtUnit && (
             <TextField
               id="contact"

frontend/src/routes/sponsor/register/stepPersonForm.tsx

@@ -315,7 +315,11 @@ const StepPersonForm = forwardRef(
               <Controller
                 name="role_end"
                 control={control}
-                rules={{ required: true }}
+                rules={{
+                  required: true,
+                  validate: () =>
+                    Number(getValues('role_end')) <= Number(todayPlusMaxDays),
+                }}
                 render={({ field }) => (
                   <DatePicker
                     mask="____-__-__"
@@ -331,11 +335,16 @@ const StepPersonForm = forwardRef(
                   />
                 )}
               />
-              {!!errors.role_end && (
+              {!!errors.role_end && errors.role_end.type === 'required' && (
                 <Box sx={{ typography: 'caption', color: 'red' }}>
                   {t('validation.roleEndRequired')}
                 </Box>
               )}
+              {!!errors.role_end && errors.role_end.type === 'validate' && (
+                <Box sx={{ typography: 'caption', color: 'red' }}>
+                  {t('validation.invalidEndDate')}
+                </Box>
+              )}
 
               {displayContactAtUnit && (
                 <TextField