@progressive-development/pd-forms 0.0.41 → 0.0.43

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.41",
+  "version": "0.0.43",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdBaseUiInput.js

@@ -19,6 +19,7 @@ export class PdBaseUIInput extends PdBaseUI {
             disabled: { type: Boolean },        // disabled flag for element
             readonly: { type: Boolean },        // readonly flag for element
             required: { type: Boolean },        // required flag for element
+            requiredMsg: { type: String },      // specific error msg for required field
             valueName: { type: String },            
             defaultRequiredChar: { type: String },            
             defaultValue: { type: String },     // default value for input element (used for reset) TODO: Das hier ggf. automatisch mit erstem gesetzten Wert füllen?

package/src/PdFormContainer.js

@@ -59,11 +59,11 @@ export class PdFormContainer extends LitElement {
 
   _validateForm(e) {
     
-    // validate required fields
+    // validate required fields TODO: Auf PdInputxxx beschränken
     this.querySelectorAll("[required]").forEach(el => {
       const tmpEl = el;
       if (!el.value || el.value === "") {
-        tmpEl.errorMsg = "Field is required";
+        tmpEl.errorMsg = el.requiredMsg || "Field is required"; // TODO: msg required field local
         e.detail.errorMap.set(el.id, tmpEl.errorMsg);
       } else {
         tmpEl.errorMsg = "";
@@ -71,15 +71,15 @@ export class PdFormContainer extends LitElement {
     })
 
     // general validate method
-    const validateByType = (fieldType, validFunc) => {
+    const validateByType = (fieldType, validFunc, example) => {
       this.querySelectorAll(`[field-type=${fieldType}]`).forEach(el => {
         const tmpEl = el;
-        // if not already added ass required field
+        // if not already added as 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`;
+            tmpEl.errorMsg = `Format ${example ? `${example} required` : "invalid"}`;
             e.detail.errorMap.set(el.id, tmpEl.errorMsg);
           }
         }
@@ -87,8 +87,10 @@ export class PdFormContainer extends LitElement {
     };
 
     // validate mail and phone inputs
-    validateByType("mail", PdFormContainer._mailIsValid);
-    validateByType("phone", PdFormContainer._phoneIsValid);
+    validateByType("mail", PdFormContainer._mailIsValid, "mail@example.com");
+    validateByType("phone", PdFormContainer._phoneIsValid, "+32 494 667085");
+    validateByType("vat", PdFormContainer._vatIsValid, "BE0123456789");
+    validateByType("number", (val) => !Number.isNaN(val), "only numbers");
   }
 
   static _mailIsValid(email) {