aw-front-helpers 2.4.0 → 2.4.1

package/classes/formControl.js

@@ -1,9 +1,11 @@
-import { gsap }       from 'gsap/all';
+import {
+  gsap
+} from 'gsap/all';
 import ScrollToPlugin from 'gsap/ScrollToPlugin';
-gsap.registerPlugin( ScrollToPlugin );
-import create             from 'dom-create-element';
-import getClosest         from '../utils/dom/getClosest';
-import regex_email        from '../utils/regex/email';
+gsap.registerPlugin(ScrollToPlugin);
+import create from 'dom-create-element';
+import getClosest from '../utils/dom/getClosest';
+import regex_email from '../utils/regex/email';
 
 const defaultOptions = {
   selectorGroup: '.form-group',
@@ -40,14 +42,17 @@ export default class FormControl {
    * @param {Object} options.i18n.checkbox - The employee's department.
    * @param {Object} options.i18n.radio - The employee's department.
    * @param {Object} options.i18n.pattern - The employee's department.
-  **/
+   **/
   constructor(form, options = {}) {
     /** @private */
     this._form = form;
     /** @private */
     this._dom = {};
     /** @private */
-    this._options = {...defaultOptions, ...options};
+    this._options = {
+      ...defaultOptions,
+      ...options
+    };
 
     this._form.setAttribute('novalidate', 'novalidate');
     this._formCreateBound();
@@ -85,10 +90,10 @@ export default class FormControl {
   // -
   destroy() {
     this._form.removeEventListener('submit', this._onFormSubmit);
-    this._domForm.inputs.forEach( input => {
+    this._domForm.inputs.forEach(input => {
       input.removeEventListener('keyup', this._onChange);
     });
-    this._domForm.choices.forEach( input => {
+    this._domForm.choices.forEach(input => {
       input.removeEventListener('change', this._onChange);
     });
   }
@@ -99,9 +104,9 @@ export default class FormControl {
 
   setError(element, message = null) {
     const parent = getClosest(element, this._options.selectorGroup);
-    if( parent) {
+    if (parent) {
       let error = parent.querySelector(`.${this._options.classErrorElement}`);
-      if(!error)  {
+      if (!error) {
         error = create({
           selector: 'ul',
           styles: this._options.classErrorElement
@@ -111,10 +116,10 @@ export default class FormControl {
       parent.classList.add(this._options.classIsError);
 
       const previousErrors = [...error.querySelectorAll('li')];
-      for(let i = 0; i < previousErrors.length; i++) {
-        if(previousErrors[i].innerHTML === message) return;
+      for (let i = 0; i < previousErrors.length; i++) {
+        if (previousErrors[i].innerHTML === message) return;
       }
-      if(message) {
+      if (message) {
         const errorElement = document.createElement('li');
         errorElement.innerHTML = message;
         error.appendChild(errorElement);
@@ -124,13 +129,20 @@ export default class FormControl {
 
   //________________________________________________________ events
   // -
-  /** @private */
-  _onFormSubmit(pEvt) {
+  /** @protected */
+  onFormSubmit(pEvt) {
     if (!this._isValid()) {
       pEvt.preventDefault();
     }
   }
 
+  /**
+   * @deprecated use onFormSubmit
+   */
+  _onFormSubmit(pEvt) {
+    this.onFormSubmit(pEvt);
+  }
+
   /** @private */
   _onChange(pEvt) {
     const el = pEvt.target;
@@ -141,13 +153,13 @@ export default class FormControl {
   // -
   /** @private */
   _formCreateBound() {
-    ['_onChange', '_onFormSubmit']
-      .forEach((fn) => this[fn] = this[fn].bind(this));
+    ['_onChange', '_onFormSubmit', 'onFormSubmit']
+    .forEach((fn) => this[fn] = this[fn].bind(this));
   }
 
   /** @private */
   _removeError(el = null) {
-    if(el) {
+    if (el) {
       const group = getClosest(el, this._options.selectorGroup);
       group.classList.remove(this._options.classIsError);
       const currentErrors = [...group.querySelectorAll(`.${this._options.classErrorElement}`)];
@@ -174,22 +186,22 @@ export default class FormControl {
     if (el.getAttribute('disabled') !== null) return false;
 
     let invalid = false;
-    if( !testRequired(el, this._form) ) {
+    if (!testRequired(el, this._form)) {
       invalid = true;
       const type = el.getAttribute('type');
-      if(type === 'radio') this.setError(el, this._options.i18n.radio);
-      else if(type === 'checkbox') this.setError(el, this._options.i18n.checkbox);
-      else if(type !== 'hidden') this.setError(el, this._options.i18n.empty);
+      if (type === 'radio') this.setError(el, this._options.i18n.radio);
+      else if (type === 'checkbox') this.setError(el, this._options.i18n.checkbox);
+      else if (type !== 'hidden') this.setError(el, this._options.i18n.empty);
     }
-    if( !testEmail(el, this._form) ) {
+    if (!testEmail(el, this._form)) {
       invalid = true;
       this.setError(el, this._options.i18n.email);
     }
-    if( !testPattern(el, this._form) ) {
+    if (!testPattern(el, this._form)) {
       invalid = true;
       this.setError(el, this._options.i18n.pattern);
     }
-    if( !testSame(el, this._form) ) {
+    if (!testSame(el, this._form)) {
       invalid = true;
       this.setError(el, this._options.i18n.same);
     }
@@ -199,13 +211,14 @@ export default class FormControl {
 
   /** @private */
   _isValid() {
-    let isValid = true, firstErrorElement = null;
+    let isValid = true,
+      firstErrorElement = null;
     this._removeError();
 
     for (let i = 0; i < this._domForm.els.length; i++) {
       const el = this._domForm.els[i];
       const error = this._checkError(el);
-      if( !error ) continue;
+      if (!error) continue;
       else isValid = false;
       if (!isValid && firstErrorElement === null) firstErrorElement = el;
     }
@@ -231,10 +244,10 @@ export default class FormControl {
   /** @private */
   _formAddEvents() {
     this._form.addEventListener('submit', this._onFormSubmit);
-    this._domForm.inputs.forEach( input => {
+    this._domForm.inputs.forEach(input => {
       input.addEventListener('keyup', this._onChange);
     });
-    this._domForm.choices.forEach( input => {
+    this._domForm.choices.forEach(input => {
       input.addEventListener('change', this._onChange);
     });
   }
@@ -251,13 +264,13 @@ export function testRequired(el, form) {
   if (isRequired === null) return true;
 
   const type = el.getAttribute('type');
-  if(type === 'radio') {
+  if (type === 'radio') {
     const radios = [...form.querySelectorAll(`input[type="radio"][name="${el.getAttribute('name')}"]`)];
     for (let i = 0; i < radios.length; i++) {
       if (radios[i].checked) return true;
     }
     return false;
-  } else if( type === 'checkbox') return el.checked;
+  } else if (type === 'checkbox') return el.checked;
   return el.value !== '';
 }
 
@@ -269,8 +282,8 @@ export function testRequired(el, form) {
  */
 export function testEmail(el, form) {
   const type = el.getAttribute('type');
-  if(type !== 'email') return true;
-  return el.value === '' && !regex_email(el.value);
+  if (type !== 'email' || el.value === '') return true;
+  return regex_email(el.value);
 }
 
 /**
@@ -281,7 +294,7 @@ export function testEmail(el, form) {
  */
 export function testSame(el, form) {
   const hasSame = el.getAttribute('data-formvalidate-same');
-  if(hasSame === null) return true;
+  if (hasSame === null) return true;
   const twinEl = form.querySelector(`[data-formvalidate-same=${el.getAttribute('data-formvalidate-same')}]`);
   return twinEl.value === el.value;
 }
@@ -294,7 +307,7 @@ export function testSame(el, form) {
  */
 export function testPattern(el, form) {
   const pattern = el.getAttribute('pattern');
-  if(pattern === null) return true;
+  if (pattern === null || el.value === '') return true;
   const rgx = new RegExp(pattern);
-  return el.value === '' && !rgx.test(el.value);
+  return rgx.test(el.value);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-front-helpers",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Assets helpers for projects",
   "author": "Yoann Le Poupon",
   "license": "ISC",