Vanilla.js form

_dev/js/theme/components/customer/index.js

@@ -1,4 +1,4 @@
-import DOMReady from "../../utils/DOMReady";
+import DOMReady from '../../utils/DOMReady';
 
 const initCustomerLinksTriggerActive = () => {
   const url = window.location.pathname;
@@ -9,7 +9,7 @@ const initCustomerLinksTriggerActive = () => {
       el.classList.add('active');
     }
   });
-}
+};
 
 const initRmaForm = () => {
   const returnForm = document.querySelector(prestashop.selectors.order.returnForm);
@@ -19,15 +19,14 @@ const initRmaForm = () => {
   }
 
   returnForm.querySelector('thead input[type=checkbox]').addEventListener('click', ({ currentTarget }) => {
-    const checked = currentTarget.checked;
+    const { checked } = currentTarget;
     returnForm.querySelectorAll('tbody input[type=checkbox]').forEach((checkbox) => {
       checkbox.checked = checked;
     });
   });
-}
-
+};
 
 DOMReady(() => {
   initCustomerLinksTriggerActive();
   initRmaForm();
-})
+});

_dev/js/theme/components/header/index.js

@@ -1,6 +1,6 @@
-import DOMReady from "../../utils/DOMReady";
+import DOMReady from '../../utils/DOMReady';
 import useTopMenu from './useTopMenu';
-import useStickyElement from "../useStickyElement";
+import useStickyElement from '../useStickyElement';
 
 const initStickyHeader = () => {
   const header = document.querySelector('.js-header-top');
@@ -11,7 +11,7 @@ const initStickyHeader = () => {
 
     init();
   }
-}
+};
 
 DOMReady(() => {
   const { init: initTopMenu } = useTopMenu('.js-main-menu');

_dev/js/theme/components/usePageLoader.js

@@ -8,7 +8,7 @@
  * pageLoader.hideLoader(); // Hide the page loader
  */
 const usePageLoader = () => {
-  const body = document.body;
+  const { body } = document;
   const ACTIVE_CLASS = 'page-loader-active';
 
   /**

_dev/js/theme/components/useStickyElement.js

@@ -68,7 +68,7 @@ export default (element, stickyWrapper, options = {}) => {
   const init = () => {
     window.addEventListener('scroll', debounce(handleSticky, debounceTime));
     handleSticky();
-  }
+  };
 
   return {
     getExtraOffsetTop,

_dev/js/theme/components/useThemeForm.js

@@ -0,0 +1,102 @@
+import { each } from '../utils/DOMHelpers';
+
+const supportedValidity = () => {
+  const input = document.createElement('input');
+  const validityProps = [
+    'validity',
+    'badInput',
+    'patternMismatch',
+    'rangeOverflow',
+    'rangeUnderflow',
+    'tooLong',
+    'tooShort',
+    'typeMismatch',
+    'valid',
+    'valueMissing',
+  ];
+
+  return validityProps.every((prop) => prop in input.validity);
+};
+
+const togglePasswordVisibility = (btn) => {
+  btn.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+
+    const input = btn.closest('.js-parent-focus').querySelector('.js-visible-password');
+
+    if (input.getAttribute('type') === 'password') {
+      input.setAttribute('type', 'text');
+      btn.innerHTML = btn.getAttribute('data-text-hide');
+    } else {
+      input.setAttribute('type', 'password');
+      btn.innerHTML = btn.getAttribute('data-text-show');
+    }
+  });
+};
+
+const formValidation = (form) => {
+  if (!supportedValidity()) {
+    return;
+  }
+
+  const divToScroll = { value: null };
+
+  Array.from(form.querySelectorAll('input, textarea')).forEach(field => {
+    field.addEventListener('blur', (e) => {
+      const inputField = e.currentTarget;
+      inputField.value = inputField.value.trim();
+    });
+  });
+
+  form.addEventListener('submit', (event) => {
+    if (form.checkValidity() === false) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      Array.from(form.querySelectorAll('input:invalid, select:invalid, textarea:invalid')).forEach(field => {
+        const inputField = field;
+        const parent = inputField.closest('.form-group');
+        const invalidFeedback = parent.querySelector('.js-invalid-feedback-browser');
+
+        invalidFeedback.textContent = inputField.validationMessage;
+
+        if (!divToScroll.value) {
+          divToScroll.value = parent;
+        }
+      });
+
+      const submitButton = form.querySelector('[type="submit"]');
+      form.dataset.disabled = false;
+      submitButton.classList.remove('disabled');
+    }
+
+    form.classList.add('was-validated');
+
+    if (divToScroll.value) {
+      window.scrollTo({
+        top: divToScroll.value.offsetTop,
+        behavior: 'smooth',
+      });
+
+      divToScroll.value = null;
+    }
+  }, false);
+};
+
+const useThemeForm = (
+  validationFormSelector = '.js-needs-validation',
+  passwordToggleSelector = '[data-action="show-password"]',
+) => {
+
+  const init = () => {
+    each(document.querySelectorAll(passwordToggleSelector), togglePasswordVisibility)
+    each(document.querySelectorAll(validationFormSelector), formValidation)
+  }
+
+  return {
+    init,
+  }
+};
+
+export default useThemeForm;

_dev/js/theme/index.js

@@ -22,7 +22,7 @@ for (const i in EventEmitter.prototype) {
   prestashop[i] = EventEmitter.prototype[i];
 }
 import usePasswordPolicy from './components/password/usePasswordPolicy';
-import Form from './components/form';
+import useThemeForm from './components/useThemeForm';
 import PageLazyLoad from './components/Lazyload';
 import httpRequestErrorHandler from './handler/error/httpRequestErrorHandler';
 import usePageLoader from "./components/usePageLoader";
@@ -37,7 +37,8 @@ prestashop.on('handleError', httpRequestErrorHandler);
 
 
 $(() => {
-  Form.init();
+  const { init: initForm } = useThemeForm();
+  initForm();
   bsCustomFileInput.init();
   usePasswordPolicy('.field-password-policy');
 

templates/customer/_partials/customer-form.tpl

@@ -28,7 +28,7 @@
     {include file='_partials/form-errors.tpl' errors=$errors['']}
   {/block}
 
-  <form action="{block name='customer_form_actionurl'}{$action}{/block}" id="customer-form" class="js-customer-form needs-validation user-form user-form--sm"
+  <form action="{block name='customer_form_actionurl'}{$action}{/block}" id="customer-form" class="js-customer-form js-needs-validation user-form user-form--sm"
     method="post">
     <div>
       {block "form_fields"}