ENGCOM-2748: Refactor JS code and added JS component file #17527

Author: Stanislav Idolov

app/code/Magento/Catalog/view/adminhtml/templates/catalog/product/attribute/form.phtml

@@ -21,13 +21,13 @@
     <input name="form_key" type="hidden" value="<?= $block->escapeHtml($block->getFormKey()) ?>" />
     <?= $block->getChildHtml('form') ?>
 </form>
-
-
-<script>
-require(['jquery', "mage/mage"], function(jQuery){
-
-    jQuery('#edit_form').mage('form').mage('validation', {validationUrl: '<?= /* @escapeNotVerified */ $block->getValidationUrl() ?>'});
-
-});
+<script type="text/x-magento-init">
+    {
+        "#edit_form": {
+            "Magento_Catalog/catalog/product/edit/attribute": {
+                "validationUrl": "<?= /* @escapeNotVerified */ $block->getValidationUrl() ?>"
+            }
+        }
+    }
 </script>
 <?= /* @escapeNotVerified */ $block->getFormScripts() ?>

app/code/Magento/Catalog/view/adminhtml/templates/catalog/product/edit/action/attribute.phtml

@@ -11,11 +11,12 @@
 <form action="<?= /* @escapeNotVerified */ $block->getSaveUrl() ?>" method="post" id="attributes-edit-form" class="attributes-edit-form" enctype="multipart/form-data">
     <?= $block->getBlockHtml('formkey') ?>
 </form>
-<script>
-require(['jquery', "mage/mage"], function(jQuery){
-
-    jQuery('#attributes-edit-form').mage('form')
-        .mage('validation', {validationUrl: '<?= /* @escapeNotVerified */ $block->getValidationUrl() ?>'});
-
-});
+<script type="text/x-magento-init">
+    {
+        "#attributes-edit-form": {
+            "Magento_Catalog/catalog/product/edit/attribute": {
+                "validationUrl": "<?= /* @escapeNotVerified */ $block->getValidationUrl() ?>"
+            }
+        }
+    }
 </script>

app/code/Magento/Catalog/view/adminhtml/web/catalog/product/edit/attribute.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery',
+    'mage/mage'
+], function ($) {
+    'use strict';
+
+    return function (config, element) {
+
+        $(element).mage('form').mage('validation', {
+            validationUrl: config.validationUrl
+        });
+    };
+});