chore: adds length validator messages (#4115)

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/NationalIdentityNumber/Examples.tsx

@@ -172,9 +172,9 @@ export const ValidationExtendValidator = () => {
           }
         }
         const myValidator = (value, { validators }) => {
-          const { dnrValidator, fnrValidator } = validators
+          const { dnrAndFnrValidator } = validators
 
-          return [dnrValidator, fnrValidator, bornInAprilValidator]
+          return [dnrAndFnrValidator, bornInAprilValidator]
         }
 
         return (

packages/dnb-eufemia/src/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumber.tsx

@@ -18,41 +18,68 @@ function NationalIdentityNumber(props: Props) {
     label,
     errorRequired,
     errorFnr,
+    errorFnrLength,
     errorDnr,
+    errorDnrLength,
     errorMinimumAgeValidator,
+    errorMinimumAgeValidatorLength,
   } = translations
   const errorMessages = useErrorMessage(props.path, props.errorMessages, {
     required: errorRequired,
     pattern: errorFnr,
     errorFnr,
+    errorFnrLength,
     errorDnr,
+    errorDnrLength,
     errorMinimumAgeValidator,
+    errorMinimumAgeValidatorLength,
   })
 
+  const identificationNumberIsOfLength = (
+    identificationNumber: string,
+    length: number
+  ) => {
+    return identificationNumber?.length === length
+  }
+
   const fnrValidator = useCallback(
     (value: string) => {
-      if (
-        value !== undefined &&
-        (Number.parseInt(value.substring(0, 1)) > 3 ||
-          fnr(value).status === 'invalid')
-      ) {
-        return Error(errorFnr)
+      if (value !== undefined) {
+        if (Number.parseInt(value.substring(0, 1)) > 3) {
+          return Error(errorFnr)
+        }
+
+        const fnrIs11Digits = identificationNumberIsOfLength(value, 11)
+
+        if (!fnrIs11Digits) {
+          return Error(errorFnrLength)
+        }
+        if (fnrIs11Digits && fnr(value).status === 'invalid') {
+          return Error(errorFnr)
+        }
       }
     },
-    [errorFnr]
+    [errorFnr, errorFnrLength]
   )
 
   const dnrValidator = useCallback(
     (value: string) => {
-      if (
-        value !== undefined &&
-        (Number.parseInt(value.substring(0, 1)) < 4 ||
-          dnr(value).status === 'invalid')
-      ) {
-        return Error(errorDnr)
+      if (value !== undefined) {
+        if (Number.parseInt(value.substring(0, 1)) < 4) {
+          return Error(errorDnr)
+        }
+
+        const dnrIs11Digits = identificationNumberIsOfLength(value, 11)
+
+        if (!dnrIs11Digits) {
+          return Error(errorDnrLength)
+        }
+        if (dnrIs11Digits && dnr(value).status === 'invalid') {
+          return Error(errorDnr)
+        }
       }
     },
-    [errorDnr]
+    [errorDnr, errorDnrLength]
   )
 
   const dnrAndFnrValidator = useCallback(
@@ -161,7 +188,18 @@ export function createMinimumAgeValidator(age: number) {
       return // stop here
     }
 
-    if (value.length > 6) {
+    const identificationNumberIs7DigitsOrMore = value?.length >= 7
+
+    if (!identificationNumberIs7DigitsOrMore) {
+      return new FormError(
+        'NationalIdentityNumber.errorMinimumAgeValidatorLength',
+        {
+          validationRule: 'errorMinimumAgeValidatorLength', // "validationRule" Will be removed in future PR
+        }
+      )
+    }
+
+    if (identificationNumberIs7DigitsOrMore) {
       const date = getBirthDateByFnrOrDnr(value)
       if (getAgeByBirthDate(date) >= age) {
         return // stop here

packages/dnb-eufemia/src/extensions/forms/Field/NationalIdentityNumber/__tests__/NationalIdentityNumber.test.tsx

@@ -372,6 +372,14 @@ describe('Field.NationalIdentityNumber', () => {
       '53137248022',
     ]
 
+    const invalidDNumTooShort = [
+      '6',
+      '5309724803',
+      '5309724',
+      '72127248',
+      '5313',
+    ]
+
     it.each(validDNum)('Valid D number: %s', async (dNum) => {
       render(
         <Field.NationalIdentityNumber value={dNum} validateInitially />
@@ -384,11 +392,7 @@ describe('Field.NationalIdentityNumber', () => {
 
     it.each(invalidDNum)('Invalid D number: %s', async (dNum) => {
       render(
-        <Field.NationalIdentityNumber
-          value={dNum}
-          validateUnchanged
-          validateInitially
-        />
+        <Field.NationalIdentityNumber value={dNum} validateInitially />
       )
 
       fireEvent.blur(document.querySelector('input'))
@@ -400,6 +404,21 @@ describe('Field.NationalIdentityNumber', () => {
         )
       })
     })
+
+    it.each(invalidDNumTooShort)('Invalid D number: %s', async (dNum) => {
+      render(
+        <Field.NationalIdentityNumber value={dNum} validateInitially />
+      )
+
+      fireEvent.blur(document.querySelector('input'))
+
+      await waitFor(() => {
+        expect(screen.queryByRole('alert')).toBeInTheDocument()
+        expect(screen.queryByRole('alert')).toHaveTextContent(
+          nb.NationalIdentityNumber.errorDnrLength
+        )
+      })
+    })
   })
 
   describe('should validate Norwegian national identity number(fnr)', () => {
@@ -424,6 +443,14 @@ describe('Field.NationalIdentityNumber', () => {
       '13137248022',
     ]
 
+    const invalidFnrNumTooShort = [
+      '2',
+      '1309724803',
+      '1309724',
+      '321',
+      '131372480',
+    ]
+
     it.each(validFnrNum)(
       'Valid national identity number(fnr): %s',
       async (fnrNum) => {
@@ -441,11 +468,7 @@ describe('Field.NationalIdentityNumber', () => {
       'Invalid national identity number(fnr): %s',
       async (fnrNum) => {
         render(
-          <Field.NationalIdentityNumber
-            validateInitially
-            validateUnchanged
-            value={fnrNum}
-          />
+          <Field.NationalIdentityNumber validateInitially value={fnrNum} />
         )
 
         fireEvent.blur(document.querySelector('input'))
@@ -458,6 +481,24 @@ describe('Field.NationalIdentityNumber', () => {
         })
       }
     )
+
+    it.each(invalidFnrNumTooShort)(
+      'Invalid national identity number(fnr): %s',
+      async (fnrNum) => {
+        render(
+          <Field.NationalIdentityNumber validateInitially value={fnrNum} />
+        )
+
+        fireEvent.blur(document.querySelector('input'))
+
+        await waitFor(() => {
+          expect(screen.queryByRole('alert')).toBeInTheDocument()
+          expect(screen.queryByRole('alert')).toHaveTextContent(
+            nb.NationalIdentityNumber.errorFnrLength
+          )
+        })
+      }
+    )
   })
 
   describe('should extend validation using custom validator', () => {
@@ -468,6 +509,8 @@ describe('Field.NationalIdentityNumber', () => {
 
     const invalidFnrNumApril = ['29040112345', '13047248032']
     const invalidDNumApril = ['69040112345', '53047248032']
+    const invalidFnrTooShort = ['2904011234', '1']
+    const invalidDNumTooShort = ['6904011234', '5']
 
     const validFnrNumNotApril = [
       '58081633086',
@@ -478,19 +521,16 @@ describe('Field.NationalIdentityNumber', () => {
 
     const invalidIds = [...validFnrNumNotApril, ...validDNumNotApril]
 
-    const bornInApril = (value: string) =>
-      value.substring(2, 4) === '04'
-        ? { status: 'valid' }
-        : { status: 'invalid' }
+    const bornInAprilValidator = (value: string) => {
+      if (value.substring(2, 4) !== '04') {
+        return new Error('custom error')
+      }
+    }
 
     const customValidator: Validator<string> = (value, { validators }) => {
       const { dnrAndFnrValidator } = validators
-      const result = bornInApril(value)
-      if (result.status === 'invalid') {
-        return new Error('custom error')
-      }
 
-      return [dnrAndFnrValidator]
+      return [dnrAndFnrValidator, bornInAprilValidator]
     }
 
     it.each(validIds)('Valid identity number: %s', async (fnrNum) => {
@@ -510,7 +550,6 @@ describe('Field.NationalIdentityNumber', () => {
         <Field.NationalIdentityNumber
           validator={customValidator}
           validateInitially
-          validateUnchanged
           value={id}
         />
       )
@@ -528,7 +567,6 @@ describe('Field.NationalIdentityNumber', () => {
         <Field.NationalIdentityNumber
           validator={customValidator}
           validateInitially
-          validateUnchanged
           value={dNum}
         />
       )
@@ -541,14 +579,30 @@ describe('Field.NationalIdentityNumber', () => {
       })
     })
 
+    it.each(invalidDNumTooShort)('Invalid D number: %s', async (dNum) => {
+      render(
+        <Field.NationalIdentityNumber
+          validator={customValidator}
+          validateInitially
+          value={dNum}
+        />
+      )
+
+      await waitFor(() => {
+        expect(screen.queryByRole('alert')).toBeInTheDocument()
+        expect(screen.queryByRole('alert')).toHaveTextContent(
+          nb.NationalIdentityNumber.errorDnrLength
+        )
+      })
+    })
+
     it.each(invalidFnrNumApril)(
       'Invalid national identity number(fnr): %s',
       async (fnr) => {
         render(
           <Field.NationalIdentityNumber
             validator={customValidator}
             validateInitially
-            validateUnchanged
             value={fnr}
           />
         )
@@ -561,5 +615,25 @@ describe('Field.NationalIdentityNumber', () => {
         })
       }
     )
+
+    it.each(invalidFnrTooShort)(
+      'Invalid national identity number(fnr): %s',
+      async (fnr) => {
+        render(
+          <Field.NationalIdentityNumber
+            validator={customValidator}
+            validateInitially
+            value={fnr}
+          />
+        )
+
+        await waitFor(() => {
+          expect(screen.queryByRole('alert')).toBeInTheDocument()
+          expect(screen.queryByRole('alert')).toHaveTextContent(
+            nb.NationalIdentityNumber.errorFnrLength
+          )
+        })
+      }
+    )
   })
 })