add additional support for custom validation on forms [not ready for review]

dist/pathfora.js

@@ -1847,6 +1847,17 @@
                   field.focus();
                 }
               }
+
+              // if a validation pattern exists we can assume its required
+              var pattern = field.getAttribute('enforcePattern');
+              if (pattern) {
+                // validate the regex pattern against the input string
+                var regex = new RegExp(pattern);
+                if (!regex.test(field.value)) {
+                  valid = false;
+                  addClass(parent, 'invalid');
+                }
+              }
             }
             // legacy support old, non-custom forms
           } else if (field.hasAttribute('data-required')) {
@@ -2213,6 +2224,11 @@
         content = document$1.createElement('input');
         content.setAttribute('type', 'email');
         break;
+      case 'us-postal-code':
+        content = document$1.createElement('input');
+        content.setAttribute('type', 'text');
+        content.setAttribute('enforcePattern', '^[0-9]{5}$');
+        break;
       case 'text':
       case 'input':
         content = document$1.createElement('input');
@@ -2223,6 +2239,11 @@
         break;
       }
 
+      // if custom validation is requested ensure that is stored on the element
+      if (elem.pattern) {
+        content.setAttribute('enforcePattern', elem.pattern);
+      }
+
       content.setAttribute('name', elem.name);
       content.setAttribute('id', elem.name);
 
@@ -2349,6 +2370,7 @@
         break;
 
       // Textarea, Input, & Select
+      case 'us-postal-code':
       case 'textarea':
       case 'input':
       case 'text':

src/rollup/form/build-form-element.js

@@ -30,6 +30,11 @@ export default function buildFormElement (elem, form) {
       content = document.createElement('input');
       content.setAttribute('type', 'email');
       break;
+    case 'us-postal-code':
+      content = document.createElement('input');
+      content.setAttribute('type', 'text');
+      content.setAttribute('enforcePattern', '^[0-9]{5}$');
+      break;
     case 'text':
     case 'input':
       content = document.createElement('input');
@@ -40,6 +45,11 @@ export default function buildFormElement (elem, form) {
       break;
     }
 
+    // if custom validation is requested ensure that is stored on the element
+    if (elem.pattern) {
+      content.setAttribute('enforcePattern', elem.pattern);
+    }
+
     content.setAttribute('name', elem.name);
     content.setAttribute('id', elem.name);
 

src/rollup/form/build-widget-form.js

@@ -24,6 +24,7 @@ export default function buildWidgetForm (formElements, form) {
       break;
 
     // Textarea, Input, & Select
+    case 'us-postal-code':
     case 'textarea':
     case 'input':
     case 'text':

src/rollup/widgets/actions/construct-widget-actions.js

@@ -127,6 +127,17 @@ export default function constructWidgetActions (widget, config) {
                 field.focus();
               }
             }
+
+            // if a validation pattern exists we can assume its required
+            var pattern = field.getAttribute('enforcePattern');
+            if (pattern) {
+              // validate the regex pattern against the input string
+              var regex = new RegExp(pattern);
+              if (!regex.test(field.value)) {
+                valid = false;
+                addClass(parent, 'invalid');
+              }
+            }
           }
           // legacy support old, non-custom forms
         } else if (field.hasAttribute('data-required')) {

test/acceptance/widget.spec.js

@@ -1600,6 +1600,138 @@ describe('Widgets', function () {
     }, 200);
   });
 
+  // -------------------------
+  //  CUSTOM FORM VALIDATION
+  // -------------------------
+
+  it('should not submit the form if custom validation fails', function (done) {
+    var customForm = new pathfora.Form({
+      id: 'custom-form-4',
+      msg: 'custom form',
+      layout: 'slideout',
+      formElements: [
+        {
+          type: 'text',
+          placeholder: 'Only 5 Digits Allowed',
+          name: 'postal_code',
+          pattern: '^[0-9]{5}$',
+          required: true
+        }
+      ]
+    });
+
+    pathfora.initializeWidgets([customForm]);
+
+    var widget = $('#' + customForm.id);
+    spyOn(jstag, 'send');
+
+    setTimeout(function () {
+      var form = widget.find('form');
+      var field = form.find('input[name="postal_code"]');
+
+      field.val('notvalid');
+      form.find('.pf-widget-ok').click();
+      expect(jstag.send).not.toHaveBeenCalled();
+      expect(widget.hasClass('opened')).toBeTruthy();
+
+      var required = widget.find('[data-required=true]');
+      expect(required.length).toBe(customForm.formElements.length);
+
+      for (var i = 0; i < required.length; i++) {
+        var req = required[i].parentNode;
+        expect(req.className.indexOf('invalid') !== -1).toBeTruthy();
+      }
+
+      done();
+    }, 200);
+  });
+
+  it('should not submit the form if custom validation fails', function (done) {
+    var customForm = new pathfora.Form({
+      id: 'custom-form-5',
+      msg: 'custom form',
+      layout: 'slideout',
+      formElements: [
+        {
+          type: 'text',
+          placeholder: 'Only 5 Digits Allowed',
+          name: 'postal_code',
+          pattern: '^[0-9]{5}$',
+          required: true
+        }
+      ]
+    });
+
+    pathfora.initializeWidgets([customForm]);
+
+    var widget = $('#' + customForm.id);
+    spyOn(jstag, 'send');
+
+    setTimeout(function () {
+      var form = widget.find('form');
+      var field = form.find('input[name="postal_code"]');
+
+      field.val('12345');
+      form.find('.pf-widget-ok').click();
+      expect(jstag.send).toHaveBeenCalled();
+      expect(widget.hasClass('opened')).toBeFalsy();
+
+      var required = widget.find('[data-required=true]');
+      expect(required.length).toBe(customForm.formElements.length);
+
+      for (var i = 0; i < required.length; i++) {
+        var req = required[i].parentNode;
+        expect(req.className.indexOf('invalid') !== -1).toBeFalsy();
+      }
+
+      done();
+    }, 200);
+  });
+
+  it('should add validation parameters if special case of us-postal-code', function (done) {
+    var customForm = new pathfora.Form({
+      id: 'custom-form-6',
+      msg: 'custom form',
+      layout: 'slideout',
+      formElements: [
+        {
+          type: 'us-postal-code',
+          placeholder: 'Only 5 Digits Allowed',
+          name: 'postal_code',
+          required: true
+        }
+      ]
+    });
+
+    pathfora.initializeWidgets([customForm]);
+
+    var widget = $('#' + customForm.id);
+    spyOn(jstag, 'send');
+
+    setTimeout(function () {
+      var form = widget.find('form');
+      var field = form.find('input[name="postal_code"]');
+
+      var pattern = field.attr('enforcePattern');
+      expect(pattern).toBe('^[0-9]{5}$');
+
+      field.val('1234a');
+      form.find('.pf-widget-ok').click();
+      expect(jstag.send).not.toHaveBeenCalled();
+      expect(widget.hasClass('opened')).toBeTruthy();
+
+      var required = widget.find('[data-required=true]');
+      expect(required.length).toBe(customForm.formElements.length);
+
+      for (var i = 0; i < required.length; i++) {
+        var req = required[i].parentNode;
+        expect(req.className.indexOf('invalid') !== -1).toBeTruthy();
+      }
+
+      done();
+    }, 200);
+  });
+
   // -------------------------
   //  IGNORED
   // -------------------------