ENGCOM-5174: issue fixed #8258 - assign indices for all array inputs so that validation works properly #15383

 - Merge Pull Request #15383 from jayankaghosh/magento2:issue-8258
 - Merged commits:
   1. 113440f
   2. 874d770
   3. 84355a3
   4. d5c41b6
   5. 156ac16
   6. 65a2c17
   7. 97c03f5
   8. 224f737
   9. 908100b
   10. 38b9709
   11. 388d31d
   12. ee288c1

Author: magento-engcom-team

lib/web/mage/validation.js

@@ -1906,6 +1906,7 @@
          * @protected
          */
         _create: function () {
+            this._prepareArrayInputs();
             this.validate = this.element.validate(this.options);
 
             // ARIA (adding aria-required attribute)
@@ -1918,6 +1919,49 @@
             this._listenFormValidate();
         },
 
+        /**
+         * Validation creation.
+         *
+         * @protected
+         */
+        _prepareArrayInputs: function () {
+            /* Store original names for array inputs */
+            var originalElements = [],
+                originalSubmitHandler = this.options.submitHandler;
+
+            /* For all array inputs, assign index so that validation is proper */
+            this.element.find('[name$="[]"]').each(function (key, input) {
+                var originalName, name;
+
+                input = $(input);
+                originalName = input.attr('name');
+                name = originalName.replace('[]', '[' + key + ']');
+                $(input).attr('name', name);
+                $(input).attr('orig-name', originalName);
+                originalElements.push({
+                    element: $(input),
+                    name: originalName
+                });
+            });
+
+            if (originalElements.length) {
+                /**
+                 *  Before submitting the actual form, remove the previously assigned indices
+                 *  @param {Object} form
+                 */
+                this.options.submitHandler = function (form, event) {
+                    originalElements.forEach(function (element) {
+                        element.element.attr('name', element.name);
+                        element.element.removeAttr('orig-name');
+                    });
+
+                    console.error(this.submit)
+                    /* Call the originalSubmitHandler if it's a function */
+                    typeof originalSubmitHandler === 'function' ? originalSubmitHandler(form) : form.submit();
+                };
+            }
+        },
+
         /**
          * Validation listening.
          * @protected

lib/web/mage/validation/validation.js

@@ -49,10 +49,13 @@
         'validate-one-checkbox-required-by-name': [
             function (value, element, params) {
                 var checkedCount = 0,
+                    selector,
                     container;
 
                 if (element.type === 'checkbox') {
-                    $('[name="' + element.name + '"]').each(function () {
+                    /* If orig-name attribute is present, use it for validation. Else use name */
+                    selector = element.getAttribute('orig-name') ? '[orig-name="' + element.getAttribute('orig-name') + '"]' : '[name="' + element.name + '"]';
+                    $(selector).each(function () {
                         if ($(this).is(':checked')) {
                             checkedCount += 1;