feat(@dpc-sdp/ripple-form): add pattern support to webforms (#1268)

Co-authored-by: David Featherston <david.featherstone@dpc.vic.gov.au> Co-authored-by: Md Nadim Hossain <getovic@gmail.com>
dpc-sdp · Jan 5, 2023 · 3c3d596 · 3c3d596
1 parent 1f91d68
commit 3c3d596
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/packages/components/Molecules/Form/index.vue b/packages/components/Molecules/Form/index.vue
@@ -145,6 +145,21 @@ export default {
       }
       return ['More than ' + field.max + ' selections are not allowed']
     }
+    // Validate if the field matches the supplied regex pattern, this displays the 'Pattern message' if it doesn't match.
+    VueFormGenerator.validators.rplMatchPattern = function (value, field) {
+      if (value) {
+        try {
+          const regex = new RegExp(field.pattern)
+
+          if (!regex.test(value)) {
+            return field.patternMessage || 'Please ensure data is entered in the correct format'
+          }
+        } catch (error) {
+          return null
+        }
+      }
+      return null
+    }
   },
   destroyed () {
     if (this.listenForClearForm) {
@@ -374,6 +389,10 @@ $rpl-form-input-search-icon: url("data:image/svg+xml,%3Csvg width='16' height='1
       order: 2;
       margin-bottom: $rpl-space-2;
       color: rpl-color('danger');
+
+      span {
+        margin-right: $rpl-space-2;
+      }
     }
   }
 

diff --git a/packages/ripple-nuxt-tide/modules/webform/mapping-filters.js b/packages/ripple-nuxt-tide/modules/webform/mapping-filters.js
@@ -115,6 +115,11 @@ module.exports = {
         }
       }
 
+      if (element['#pattern']) {
+        field.pattern = element['#pattern']
+        field.patternMessage = element['#pattern_error']
+      }
+
       const defaultValue = element['#default_value']
 
       switch (element['#type']) {
@@ -134,6 +139,7 @@ module.exports = {
           } else {
             field.validator.push('string')
           }
+          if (field.pattern) field.validator.push('rplMatchPattern')
           if (defaultValue) data.model[eName] = defaultValue
           break
 
@@ -157,13 +163,15 @@ module.exports = {
           field.type = 'input'
           field.inputType = 'email'
           field.validator.push('email', 'string')
+          if (field.pattern) field.validator.push('rplMatchPattern')
           if (defaultValue) data.model[eName] = defaultValue
           break
 
         case 'tel':
           field.type = 'input'
           field.inputType = 'tel'
           field.validator.push('string')
+          if (field.pattern) field.validator.push('rplMatchPattern')
           if (defaultValue) data.model[eName] = defaultValue
           break
 
@@ -201,6 +209,7 @@ module.exports = {
           } else {
             field.validator.push('string')
           }
+          if (field.pattern) field.validator.push('rplMatchPattern')
           if (defaultValue) data.model[eName] = defaultValue
           break
 
@@ -283,6 +292,7 @@ module.exports = {
           field.type = 'input'
           field.inputType = 'url'
           field.validator.push('string')
+          if (field.pattern) field.validator.push('rplMatchPattern')
           if (defaultValue) data.model[eName] = defaultValue
           break