JS validation: dynamically added form inputs are now validated #260

shopsys · Aug 3, 2018 · 87c13b9 · 87c13b9
2 parents b3a24d2 + 569002f
commit 87c13b9
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### [shopsys/framework]
+#### Fixed
+- [#260 - JS validation: dynamically added form inputs are now validated](https://github.com/shopsys/shopsys/pull/260)
 
 ## [7.0.0-alpha4] - 2018-08-02
 ### [shopsys/framework]

diff --git a/packages/framework/src/Resources/scripts/admin/categoryTree.formItem.js b/packages/framework/src/Resources/scripts/admin/categoryTree.formItem.js
@@ -108,7 +108,7 @@
             newItemHtml = newItemHtml.replace(/__name__/g, itemData.id);
             newItemHtml = newItemHtml.replace(/__category_name__/g, itemData.categoryName);
 
-            var $newItem = $(newItemHtml);
+            var $newItem = $($.parseHTML(newItemHtml));
             $newItem.data('load-url', itemData.loadUrl);
             $newItem.data('has-children', itemData.hasChildren);
             if (itemData.isVisible === false) {

diff --git a/packages/framework/src/Resources/scripts/admin/entityUrlList.newUrl.js b/packages/framework/src/Resources/scripts/admin/entityUrlList.newUrl.js
@@ -20,6 +20,7 @@
             var $newUrl = $($.parseHTML(newUrl));
 
             $newUrlsContainer.append($newUrl);
+            Shopsys.register.registerNewContent($newUrl);
 
             Shopsys.validation.addNewItemToCollection('#' + newUrlsId, index);
             Shopsys.formChangeInfo.showInfo();

diff --git a/packages/framework/src/Resources/scripts/admin/orderItems.js b/packages/framework/src/Resources/scripts/admin/orderItems.js
@@ -74,10 +74,11 @@
         $item.data('index', index);
 
         $collection.append($item);
-        Shopsys.validation.addNewItemToCollection('#order_form_items', index);
+        Shopsys.register.registerNewContent($item);
 
-        Shopsys.order.items.refreshCount($collection);
+        Shopsys.validation.addNewItemToCollection('#order_form_items', index);
         Shopsys.formChangeInfo.showInfo();
+        Shopsys.order.items.refreshCount($collection);
     };
 
     Shopsys.order.items.addProduct = function (productId, productName) {

diff --git a/packages/framework/src/Resources/scripts/admin/parameters.js b/packages/framework/src/Resources/scripts/admin/parameters.js
@@ -27,16 +27,17 @@
             var item = prototype
                 .replace(/__name__label__/g, index)
                 .replace(/__name__/g, index);
-            var $item = $(item);
+            var $item = $($.parseHTML(item));
             $item.data('index', index);
 
             $collection.data('index', index + 1);
 
             $collection.append($item);
+            Shopsys.register.registerNewContent($item);
 
+            Shopsys.validation.addNewItemToCollection('#product_edit_form_parameters', index);
             Shopsys.formChangeInfo.showInfo();
             Shopsys.parameters.refreshCount($collection);
-            Shopsys.validation.addNewItemToCollection('#product_edit_form_parameters', index);
 
             return false;
         });

diff --git a/packages/framework/src/Resources/scripts/common/validation/customizeBundle.js b/packages/framework/src/Resources/scripts/common/validation/customizeBundle.js
@@ -115,6 +115,23 @@
         Shopsys.timeout.setTimeoutAndClearPrevious('Shopsys.validation.validateWithParentsDelayed', executeDelayedValidators, 100);
     };
 
+    // Issue in dynamic collections validation that causes duplication of substrings in identifiers
+    // Issue described in https://github.com/formapro/JsFormValidatorBundle/issues/139
+    // PR with fix in the original package: https://github.com/formapro/JsFormValidatorBundle/pull/141
+    FpJsFormValidator._preparePrototype = FpJsFormValidator.preparePrototype;
+    FpJsFormValidator.preparePrototype = function (prototype, name) {
+        prototype.name = prototype.name.replace(/__name__/g, name);
+        prototype.id = prototype.id.replace(/__name__/g, name);
+
+        if (typeof prototype.children === 'object') {
+            for (var childName in prototype.children) {
+                prototype[childName] = this.preparePrototype(prototype.children[childName], name);
+            }
+        }
+
+        return prototype;
+    };
+
     Shopsys.validation.removeDelayedValidationWithParents = function (jsFormValidator) {
         do {
             delete delayedValidators[jsFormValidator.id];

diff --git a/packages/framework/src/Resources/scripts/common/validation/validation.js b/packages/framework/src/Resources/scripts/common/validation/validation.js
@@ -3,19 +3,23 @@
     Shopsys = window.Shopsys || {};
     Shopsys.validation = Shopsys.validation || {};
 
-    $(document).ready(function () {
-        $('.js-no-validate-button').click(function () {
+    Shopsys.register.registerCallback(function ($container) {
+
+        $container.filterAllNodes('.js-no-validate-button').click(function () {
             $(this).closest('form').addClass('js-no-validate');
         });
-        $('.js-validation-error-close').click(function () {
+
+        $container.filterAllNodes('.js-validation-error-close').click(function () {
             $(this).closest('.js-validation-error').hide();
         });
-        $('.js-validation-error-toggle').click(function () {
+
+        $container.filterAllNodes('.js-validation-error-toggle').click(function () {
             $(this)
                 .closest('.js-validation-errors-list')
                 .find('.js-validation-error')
                 .toggle();
         });
+
     });
 
     Shopsys.validation.findElementsToHighlight = function ($formInput) {