fix(forms): enhance Field.Name validation rule (#3849)

dnbexperience · Aug 21, 2024 · 9c9142d · 9c9142d
1 parent fd35828
commit 9c9142d
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 8 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Name/Name.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Name/Name.tsx
@@ -9,7 +9,7 @@ function Name(props: Props) {
   const StringFieldProps: Props = {
     trim: true,
     autoComplete: 'name',
-    pattern: '^[\\p{L}\\p{M} \\-]+$',
+    pattern: '^(?!.*[\\-\\s]{2})[\\p{L}]+([ \\-][\\p{L}]+)*$',
     ...props,
   }
 
@@ -61,7 +61,8 @@ Name.Company = function CompanyName(props: Props) {
 
   const StringFieldProps: Props = {
     label: translations.label,
-    pattern: undefined,
+    pattern:
+      '^(?!.*[-\\s]{2})(?!.*[\\.]{2})[\\p{L}\\p{N}][\\p{L}\\p{N}\\p{P}\\p{Zs}.]*[\\p{L}\\p{N}\\p{P}]$',
     autoComplete: 'organization',
     ...props,
     errorMessages,

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Name/__tests__/Name.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Name/__tests__/Name.test.tsx
@@ -4,6 +4,9 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Props } from '../'
 import { Field, Form } from '../../..'
+import nbNO from '../../../constants/locales/nb-NO'
+
+const nb = nbNO['nb-NO']
 
 describe('Field.Name', () => {
   it('should render with props', () => {
@@ -185,6 +188,80 @@ describe('Field.Name', () => {
     expect(screen.queryByRole('alert')).not.toBeInTheDocument()
   })
 
+  describe('should validate the correctness of a name', () => {
+    const validNames = [
+      'Ole',
+      'Anne-Marie',
+      'Hans Christian',
+      'Åse',
+      'Müller',
+      'García-López',
+      'Frédéric-Jean',
+    ]
+
+    const invalidNames = [
+      'Ole1',
+      'Hans  Christian',
+      'Anne--Marie',
+      '@nna',
+      'Ole--',
+      'Liv-',
+      ' Martin',
+      'Anders ',
+    ]
+
+    it.each(validNames)('Valid name: %s', (name) => {
+      render(<Field.Name validateInitially value={name} />)
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+    })
+
+    it.each(invalidNames)('Invalid name: %s', (name) => {
+      render(<Field.Name validateInitially value={name} />)
+      expect(screen.queryByRole('alert')).toBeInTheDocument()
+      expect(screen.queryByRole('alert')).toHaveTextContent(
+        nb.Field.errorPattern
+      )
+    })
+  })
+
+  describe('should validate the correctness of a company name', () => {
+    const validNames = [
+      'Acme Inc. 123',
+      'XYZ Corporation',
+      'Global Co.',
+      'Tech Solutions Ltd.',
+      'Alpha & Omega Enterprises',
+      'Beta Industries',
+      'Gamma-Group',
+      'Ink @ Nine',
+      '123',
+      'Non–Breaking Space',
+      'Corp!',
+    ]
+
+    const invalidNames = [
+      'Tech  Solutions',
+      'XYZ--Corp',
+      '@nna',
+      'Acme--',
+      ' Limited',
+      'Limited ',
+    ]
+
+    it.each(validNames)('Valid name: %s', (name) => {
+      render(<Field.Name.Company validateInitially value={name} />)
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+    })
+
+    it.each(invalidNames)('Invalid name: %s', (name) => {
+      render(<Field.Name.Company validateInitially value={name} />)
+      expect(screen.queryByRole('alert')).toBeInTheDocument()
+      expect(screen.queryByRole('alert')).toHaveTextContent(
+        nb.Field.errorPattern
+      )
+    })
+  })
+
   describe('ARIA', () => {
     it('should validate with ARIA rules', async () => {
       const result = render(

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/Section.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/Section.test.tsx
@@ -118,11 +118,11 @@ describe('Form.Section', () => {
           },
           "label": "Fornavn",
           "path": "/firstName",
-          "pattern": "^[\\p{L}\\p{M} \\-]+$",
+          "pattern": "^(?!.*[\\-\\s]{2})[\\p{L}]+([ \\-][\\p{L}]+)*$",
           "schema": {
             "maxLength": undefined,
             "minLength": undefined,
-            "pattern": "^[\\p{L}\\p{M} \\-]+$",
+            "pattern": "^(?!.*[\\-\\s]{2})[\\p{L}]+([ \\-][\\p{L}]+)*$",
             "type": "string",
           },
           "trim": true,
@@ -139,12 +139,12 @@ describe('Form.Section', () => {
           "label": "Etternavn",
           "minLength": 2,
           "path": "/lastName",
-          "pattern": "^[\\p{L}\\p{M} \\-]+$",
+          "pattern": "^(?!.*[\\-\\s]{2})[\\p{L}]+([ \\-][\\p{L}]+)*$",
           "required": true,
           "schema": {
             "maxLength": undefined,
             "minLength": 2,
-            "pattern": "^[\\p{L}\\p{M} \\-]+$",
+            "pattern": "^(?!.*[\\-\\s]{2})[\\p{L}]+([ \\-][\\p{L}]+)*$",
             "type": "string",
           },
           "trim": true,
@@ -178,11 +178,11 @@ describe('Form.Section', () => {
       {
         "properties": {
           "firstName": {
-            "pattern": "^[\\p{L}\\p{M} \\-]+$",
+            "pattern": "^(?!.*[\\-\\s]{2})[\\p{L}]+([ \\-][\\p{L}]+)*$",
             "type": "string",
           },
           "lastName": {
-            "pattern": "^[\\p{L}\\p{M} \\-]+$",
+            "pattern": "^(?!.*[\\-\\s]{2})[\\p{L}]+([ \\-][\\p{L}]+)*$",
             "type": "string",
           },
         },