-
Notifications
You must be signed in to change notification settings - Fork 0
/
validations.plugin.ts
108 lines (98 loc) 路 4.4 KB
/
validations.plugin.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import { ValidationOutput } from '../abstract-form';
import { FormPlugin } from '../plugins';
export type ValidationPluginConfig = {
parentElement?: keyof HTMLElementTagNameMap;
childElement?: keyof HTMLElementTagNameMap;
messages?: {
required?: string;
requiredTrue?: string;
email?: string;
min?: string;
max?: string;
minLength?: string;
maxLength?: string;
};
};
export class ValidationsPlugin implements FormPlugin<ValidationOutput> {
private _parentElement: keyof HTMLElementTagNameMap;
private _childElement: keyof HTMLElementTagNameMap;
private _messages: ValidationPluginConfig['messages'] | undefined;
constructor(config?: ValidationPluginConfig) {
this._parentElement = config?.parentElement || 'div';
this._childElement = config?.childElement || 'p';
this._messages = config?.messages;
}
run(input: ValidationOutput): void {
const validations = input;
if (!validations) return;
for (const val of validations) {
const parent = val.control.getParentElement();
if (!parent) return;
val.control.getValidationsElement()?.remove();
const errorsWrapper = document.createElement(this._parentElement);
errorsWrapper.dataset.unitType = 'ValidationsWrapper';
if (val.errors.length === 0) {
parent.dataset.status = 'valid';
} else {
parent.dataset.status = 'invalid';
}
for (const error of val.errors) {
if (error.required) {
const errorMessage = document.createElement(this._childElement) as HTMLParagraphElement;
errorMessage.dataset.unitType = 'ValidationItem';
errorMessage.textContent = this._messages?.required || 'Required field';
errorsWrapper.append(errorMessage);
}
if (error.requiredTrue) {
const errorMessage = document.createElement(this._childElement) as HTMLParagraphElement;
errorMessage.dataset.unitType = 'ValidationItem';
errorMessage.textContent = this._messages?.requiredTrue || 'Required field';
errorsWrapper.append(errorMessage);
}
if (error.email) {
const errorMessage = document.createElement(this._childElement) as HTMLParagraphElement;
errorMessage.dataset.unitType = 'ValidationItem';
errorMessage.textContent = this._messages?.email || 'Invalid email';
errorsWrapper.append(errorMessage);
}
if (error.min) {
const errorMessage = document.createElement(this._childElement) as HTMLParagraphElement;
errorMessage.dataset.unitType = 'ValidationItem';
errorMessage.textContent =
this._messages?.min?.replace('{0}', error.min.min).replace('{1}', error.min.current) ||
`Min: ${error.min.min}, Current: ${error.min.current}`;
errorsWrapper.append(errorMessage);
}
if (error.max) {
const errorMessage = document.createElement(this._childElement) as HTMLParagraphElement;
errorMessage.dataset.unitType = 'ValidationItem';
errorMessage.textContent =
this._messages?.max?.replace('{0}', error.max.max).replace('{1}', error.max.current) ||
`Max: ${error.max.max}, Current: ${error.max.current}`;
errorsWrapper.append(errorMessage);
}
if (error.minLength) {
const errorMessage = document.createElement(this._childElement) as HTMLParagraphElement;
errorMessage.dataset.unitType = 'ValidationItem';
errorMessage.textContent =
this._messages?.minLength
?.replace('{0}', error.minLength.requiredLength)
.replace('{1}', error.minLength.currentLength) ||
`Min length: ${error.minLength.requiredLength}, Current length: ${error.minLength.currentLength}`;
errorsWrapper.append(errorMessage);
}
if (error.maxLength) {
const errorMessage = document.createElement(this._childElement) as HTMLParagraphElement;
errorMessage.dataset.unitType = 'ValidationItem';
errorMessage.textContent =
this._messages?.maxLength
?.replace('{0}', error.maxLength.requiredLength)
.replace('{1}', error.maxLength.currentLength) ||
`Max length: ${error.maxLength.requiredLength}, Current length: ${error.maxLength.currentLength}`;
errorsWrapper.append(errorMessage);
}
parent?.append(errorsWrapper);
}
}
}
}