@progressive-development/pd-forms 0.0.25 → 0.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/PdFormContainer.js +55 -0
package/package.json
CHANGED
package/src/PdFormContainer.js
CHANGED
|
@@ -31,6 +31,11 @@ export class PdFormContainer extends LitElement {
|
|
|
31
31
|
};
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
firstUpdated() {
|
|
35
|
+
// add validation event listener
|
|
36
|
+
this.addEventListener('validate-form', this._validateForm);
|
|
37
|
+
}
|
|
38
|
+
|
|
34
39
|
render() {
|
|
35
40
|
return html`
|
|
36
41
|
<form>
|
|
@@ -39,4 +44,54 @@ export class PdFormContainer extends LitElement {
|
|
|
39
44
|
`;
|
|
40
45
|
}
|
|
41
46
|
|
|
47
|
+
_validateForm(e) {
|
|
48
|
+
|
|
49
|
+
// validate required fields
|
|
50
|
+
this.querySelectorAll("[required]").forEach(el => {
|
|
51
|
+
const tmpEl = el;
|
|
52
|
+
if (!el.value || el.value === "") {
|
|
53
|
+
tmpEl.errorMsg = "Field is required";
|
|
54
|
+
e.detail.errorMap.set(el.id, tmpEl.errorMsg);
|
|
55
|
+
} else {
|
|
56
|
+
tmpEl.errorMsg = "";
|
|
57
|
+
}
|
|
58
|
+
})
|
|
59
|
+
|
|
60
|
+
// general validate method
|
|
61
|
+
const validateByType = (fieldType, validFunc) => {
|
|
62
|
+
this.querySelectorAll(`[field-type=${fieldType}]`).forEach(el => {
|
|
63
|
+
const tmpEl = el;
|
|
64
|
+
// if not already added ass required field
|
|
65
|
+
if (!e.detail.errorMap.has(el.id) && el.value && el.value.length > 0) {
|
|
66
|
+
if (validFunc(el.value)) {
|
|
67
|
+
tmpEl.errorMsg = "";
|
|
68
|
+
} else {
|
|
69
|
+
tmpEl.errorMsg = `Invalid ${fieldType} format`;
|
|
70
|
+
e.detail.errorMap.set(el.id, tmpEl.errorMsg);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
// validate mail and phone inputs
|
|
77
|
+
validateByType("mail", PdFormContainer._mailIsValid);
|
|
78
|
+
validateByType("phone", PdFormContainer._phoneIsValid);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
static _mailIsValid(email) {
|
|
82
|
+
const mValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
|
83
|
+
return mValid;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
static _vatIsValid(vat) {
|
|
87
|
+
const mValid = /^BE[0-9]{10}/.test(vat);
|
|
88
|
+
return mValid;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
static _phoneIsValid(nr) {
|
|
92
|
+
// Valid +49 830 9001 | 49 221 123 | 08912379
|
|
93
|
+
const mValid = /^\+?[0-9 ]{7,15}$/.test(nr);
|
|
94
|
+
return mValid;
|
|
95
|
+
}
|
|
96
|
+
|
|
42
97
|
}
|