@progressive-development/pd-forms 0.0.24 → 0.0.26

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent pd-forms following open-wc recommendations",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdFormContainer.js

@@ -31,6 +31,11 @@ export class PdFormContainer extends LitElement {
     };
   }
 
+  firstUpdated() {
+    // add validation event listener
+    this.addEventListener('validate-form', this._validateForm);
+  }
+
   render() {
     return html`  
       <form>
@@ -39,4 +44,54 @@ export class PdFormContainer extends LitElement {
     `;
   }
 
+  _validateForm(e) {
+    
+    // validate required fields
+    this.querySelectorAll("[required]").forEach(el => {
+      const tmpEl = el;
+      if (!el.value || el.value === "") {
+        tmpEl.errorMsg = "Field is required";
+        e.detail.errorMap.set(el.id, tmpEl.errorMsg);
+      } else {
+        tmpEl.errorMsg = "";
+      }
+    })
+
+    // general validate method
+    const validateByType = (fieldType, validFunc) => {
+      this.querySelectorAll(`[field-type=${fieldType}]`).forEach(el => {
+        const tmpEl = el;
+        // if not already added ass required field
+        if (!e.detail.errorMap.has(el.id) && el.value && el.value.length > 0) {
+          if (validFunc(el.value)) {
+            tmpEl.errorMsg =  "";
+          } else {
+            tmpEl.errorMsg = `Invalid ${fieldType} format`;
+            e.detail.errorMap.set(el.id, tmpEl.errorMsg);
+          }
+        }
+      });
+    };
+
+    // validate mail and phone inputs
+    validateByType("mail", PdFormContainer._mailIsValid);
+    validateByType("phone", PdFormContainer._phoneIsValid);
+  }
+
+  static _mailIsValid(email) {
+    const mValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    return mValid;
+  }
+
+  static _vatIsValid(vat) {
+    const mValid = /^BE[0-9]{10}/.test(vat);
+    return mValid;
+  }
+
+  static _phoneIsValid(nr) {
+    // Valid +49 830 9001 | 49 221 123 | 08912379
+    const mValid = /^\+?[0-9 ]{7,15}$/.test(nr);
+    return mValid;
+  }
+
 }

package/src/PdFormRow.js

@@ -47,7 +47,7 @@ export class PdFormRow extends LitElement {
     }    
     /* Area is longer? Scrollbar? */
     ::slotted(.quarter3-area) {
-      --squi-input-width: calc((var(--my-row-width) - 22px) * 0.75  - (var(--my-gap) * 0.25));          
+      --squi-input-width-area: calc((var(--my-row-width) - 22px) * 0.75  - (var(--my-gap) * 0.25));          
     }
 
     ::slotted(.quarter4) {
@@ -55,7 +55,7 @@ export class PdFormRow extends LitElement {
     }   
     /* Area is longer? Scrollbar? */
     ::slotted(.quarter4-area) {
-      --squi-input-width: calc(var(--my-row-width) - 22px);                
+      --squi-input-width-area: calc(var(--my-row-width) - 22px);                
     }
 
     @media (max-width: 930px) {            

package/src/PdInputArea.js

@@ -78,7 +78,7 @@ export class PdInputArea extends PdBaseUIInput {
       css`      
         /* 10 py scroll border rigth? => overwrite*/
         .input-style {
-            width: var(--squi-input-width, 240px);
+            width: var(--squi-input-width-area, 240px);
         }
             
     `];