Merge pull request #94 from unimal-jp/feature/add-form-validation

Use validation set in CMS

package.json

@@ -70,7 +70,7 @@
   },
   "dependencies": {
     "@nuxt/types": "^2.15.7",
-    "@spearly/sdk-js": "^1.3.0",
+    "@spearly/sdk-js": "^1.3.2",
     "@types/node-fetch": "^2.5.12",
     "@vue/compiler-sfc": "^3.2.2",
     "node-fetch": "^2.6.1",

src/components/spearly-form.vue

@@ -254,6 +254,7 @@ export default Vue.extend<
         description: res.confirmationEmail.description,
         order: 0,
         required: true,
+        validationRegex: '',
       })
     }
 
@@ -346,8 +347,13 @@ export default Vue.extend<
       })
 
       telFields.forEach((identifier) => {
-        if (this.answers[identifier] && !/^[0-9\-]+$/.test(this.answers[identifier] as string)) {
-          this.validateErrors.push({ identifier, message: '電話番号を入力してください。' })
+        const field = this.form.fields.find((field) => field.identifier === identifier)!
+        if (!field.validationRegex) return
+
+        const regex = new RegExp(field.validationRegex)
+        if (this.answers[identifier] && !regex.test(this.answers[identifier] as string)) {
+          const format = field.validationRegex === '^[+]?\\d+$' ? 'ハイフンなし' : '半角数字とハイフン'
+          this.validateErrors.push({ identifier, message: `電話番号（${format}）を入力してください。` })
         }
       })
 

src/specs/components/_mocks.ts

@@ -65,6 +65,7 @@ export const createFormMock = (startedAt: Date | null = null, endedAt: Date | nu
       inputType: 'text',
       order: 0,
       required: true,
+      validationRegex: '',
     },
     {
       identifier: 'number',
@@ -73,6 +74,7 @@ export const createFormMock = (startedAt: Date | null = null, endedAt: Date | nu
       inputType: 'number',
       order: 1,
       required: true,
+      validationRegex: '',
     },
     {
       identifier: 'email',
@@ -81,6 +83,7 @@ export const createFormMock = (startedAt: Date | null = null, endedAt: Date | nu
       inputType: 'email',
       order: 2,
       required: true,
+      validationRegex: '',
     },
     {
       identifier: 'tel',
@@ -89,6 +92,7 @@ export const createFormMock = (startedAt: Date | null = null, endedAt: Date | nu
       inputType: 'tel',
       order: 3,
       required: true,
+      validationRegex: '/^[+]?\\d+-\\d+-\\d+$/',
     },
     {
       identifier: 'url',
@@ -97,6 +101,7 @@ export const createFormMock = (startedAt: Date | null = null, endedAt: Date | nu
       inputType: 'url',
       order: 4,
       required: true,
+      validationRegex: '',
     },
     {
       identifier: 'textArea',
@@ -105,6 +110,7 @@ export const createFormMock = (startedAt: Date | null = null, endedAt: Date | nu
       inputType: 'text_area',
       order: 5,
       required: true,
+      validationRegex: '',
     },
     {
       identifier: 'radio',
@@ -117,6 +123,7 @@ export const createFormMock = (startedAt: Date | null = null, endedAt: Date | nu
         options: ['r1', 'r2'],
         allowedExtensions: [],
       },
+      validationRegex: '',
     },
     {
       identifier: 'checkbox',
@@ -129,6 +136,7 @@ export const createFormMock = (startedAt: Date | null = null, endedAt: Date | nu
         options: ['c1', 'c2', 'c3'],
         allowedExtensions: [],
       },
+      validationRegex: '',
     },
   ],
   callbackUrl: '',