[open-formulieren/open-forms#3383] Refactored phone number validation

src/formio/validators/plugins.js

@@ -8,34 +8,35 @@ const errorMessageMap = {
   'phonenumber-nl': 'Invalid Dutch phonenumber',
 };
 
-const pluginAPIValidator = plugin => {
-  let defaultMsg = errorMessageMap[plugin];
-  // catches undefined too
-  if (defaultMsg == null) {
-    defaultMsg = 'Invalid';
-  }
+const pluginsAPIValidator = {
+  key: `validate.backendApi`,
+  message(component) {
+    return component.t(component.errorMessage('Invalid'), {
+      field: component.errorLabel,
+      data: component.data,
+    });
+  },
+  check(component, setting, value) {
+    if (!value) return true;
 
-  return {
-    key: `validate.${plugin}`,
-    message(component) {
-      return component.t(component.errorMessage(defaultMsg), {
-        field: component.errorLabel,
-        data: component.data,
-      });
-    },
-    check(component, setting, value) {
-      if (!value) return true;
+    const plugins = component.component.validate.plugins;
+    const {baseUrl} = component.currentForm?.options || component.options;
 
-      const {baseUrl} = component.currentForm?.options || component.options;
+    const promises = plugins.map(plugin => {
       const url = `${baseUrl}validation/plugins/${plugin}`;
-      return post(url, {value})
-        .then(response => {
-          const valid = response.data.isValid;
-          return valid ? true : response.data.messages.join('<br>');
-        })
-        .catch(() => false);
-    },
-  };
+      return post(url, {value}).then(response => {
+        const valid = response.data.isValid;
+        return valid ? true : response.data.messages.join('<br>');
+      });
+    });
+    return Promise.all(promises).then(results => {
+      const anyValid = results.some(result => result === true);
+
+      if (anyValid) return true;
+
+      return results.join('<br>');
+    });
+  },
 };
 
 /**
@@ -46,13 +47,10 @@ const pluginAPIValidator = plugin => {
  */
 const enableValidationPlugins = component => {
   if (Array.isArray(component.component.validate.plugins)) {
-    for (let plugin of component.component.validate.plugins) {
-      const validator = pluginAPIValidator(plugin);
-      if (validator == null) continue;
-      component.component.validateOn = 'blur';
-      component.validator.validators[plugin] = validator;
-      component.validators.push(plugin);
-    }
+    debugger;
+    component.component.validateOn = 'blur';
+    component.validator.validators.backendApi = pluginsAPIValidator;
+    component.validators.push('backendApi');
   }
 };
 

src/jstests/formio/validators/mocks.js

@@ -0,0 +1,13 @@
+import {rest} from 'msw';
+
+import {BASE_URL} from 'api-mocks';
+
+const VALIDATION_ENDPOINT = `${BASE_URL}validation/plugins/phonenumber-international`;
+
+export const mockValidationGet = rest.get(VALIDATION_ENDPOINT, (req, res, ctx) => {
+  const response = {
+    isValid: true,
+    messages: [],
+  };
+  return res(ctx.status(200), ctx.json(response));
+});

src/jstests/formio/validators/pluginApiValidator.spec.js

@@ -0,0 +1,14 @@
+import {BASE_URL} from 'api-mocks';
+import mswServer from 'api-mocks/msw-server';
+
+import {
+    mockValidationGet
+} from './mocks';
+import pluginsAPIValidator from '..validators/pluginsAPIValidator';
+
+describe('The OpenForms validation', () => {
+  it('tests...', async () => {
+    mswServer.use(mockValidationGet);
+    const pluginvalidator = pluginsAPIValidator;
+
+