dry-ux 1.54.0 → 1.56.0
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.
|
@@ -31,6 +31,11 @@ export declare class Element {
|
|
|
31
31
|
* @returns The value of the data attribute.
|
|
32
32
|
*/
|
|
33
33
|
data(attribute: string): string;
|
|
34
|
+
/**
|
|
35
|
+
* Gets the value of an attribute.
|
|
36
|
+
* @param attribute
|
|
37
|
+
*/
|
|
38
|
+
attr(attribute: string): string;
|
|
34
39
|
/**
|
|
35
40
|
* Checks if the element is visible.
|
|
36
41
|
* @returns True if the element is visible, false otherwise.
|
|
@@ -113,13 +118,19 @@ export declare class Validation {
|
|
|
113
118
|
* Validates the entire form.
|
|
114
119
|
* @returns True if the form is valid, false otherwise.
|
|
115
120
|
*/
|
|
116
|
-
validateForm():
|
|
121
|
+
validateForm<T = void>(): {
|
|
122
|
+
isValid: boolean;
|
|
123
|
+
values: T;
|
|
124
|
+
};
|
|
117
125
|
/**
|
|
118
126
|
* Validates a specific input element.
|
|
119
127
|
* @param input The input element or its ID.
|
|
120
128
|
* @returns True if the input is valid, false otherwise.
|
|
121
129
|
*/
|
|
122
|
-
validateInput(input: HTMLElement | string):
|
|
130
|
+
validateInput(input: HTMLElement | string): {
|
|
131
|
+
isValid: boolean;
|
|
132
|
+
value?: string;
|
|
133
|
+
};
|
|
123
134
|
/**
|
|
124
135
|
* Validates a specific element.
|
|
125
136
|
* @param element The element to validate.
|
|
@@ -41,6 +41,13 @@ class Element {
|
|
|
41
41
|
* @returns The value of the data attribute.
|
|
42
42
|
*/
|
|
43
43
|
data(attribute) {
|
|
44
|
+
return this.native.getAttribute(["data"].concat(attribute.split(/(?=[A-Z])/).map(s => s.toLowerCase())).join("-"));
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Gets the value of an attribute.
|
|
48
|
+
* @param attribute
|
|
49
|
+
*/
|
|
50
|
+
attr(attribute) {
|
|
44
51
|
return this.native.getAttribute(attribute);
|
|
45
52
|
}
|
|
46
53
|
/**
|
|
@@ -131,7 +138,15 @@ class Validation {
|
|
|
131
138
|
* @returns True if the form is valid, false otherwise.
|
|
132
139
|
*/
|
|
133
140
|
validateForm() {
|
|
134
|
-
|
|
141
|
+
const values = {};
|
|
142
|
+
const isValid = !this.getElements(this.form).filter(element => {
|
|
143
|
+
const { isValid, value } = this.validate(element);
|
|
144
|
+
if (isValid && element.attr("name")) {
|
|
145
|
+
values[element.attr("name")] = value;
|
|
146
|
+
}
|
|
147
|
+
return !isValid;
|
|
148
|
+
}).length;
|
|
149
|
+
return { isValid, values };
|
|
135
150
|
}
|
|
136
151
|
/**
|
|
137
152
|
* Validates a specific input element.
|
|
@@ -150,21 +165,21 @@ class Validation {
|
|
|
150
165
|
validate(element) {
|
|
151
166
|
var _a;
|
|
152
167
|
if (!element.visible() && !element.hasClass("validate-hidden")) {
|
|
153
|
-
return true;
|
|
168
|
+
return { isValid: true };
|
|
154
169
|
}
|
|
155
|
-
let
|
|
170
|
+
let value = element.val(), errorRefAttr = element.data("validationErrorRef");
|
|
156
171
|
let isValid = true;
|
|
157
172
|
let errorMsg = "";
|
|
158
|
-
const numericValue = Number(
|
|
173
|
+
const numericValue = Number(value);
|
|
159
174
|
if (element.data("validationTrim") != null) {
|
|
160
175
|
const trim = element.data("validationTrim");
|
|
161
176
|
for (let i = 0, len = trim.length; i < len; i++) {
|
|
162
|
-
|
|
177
|
+
value = value.split(trim[i]).join("");
|
|
163
178
|
}
|
|
164
179
|
}
|
|
165
180
|
//Optional: data-required-message
|
|
166
181
|
if (element.hasClass("validate-required") && isValid) {
|
|
167
|
-
isValid =
|
|
182
|
+
isValid = value != "";
|
|
168
183
|
if (element.data("requiredMessage") != null)
|
|
169
184
|
errorMsg = element.data("requiredMessage");
|
|
170
185
|
else
|
|
@@ -201,7 +216,7 @@ class Validation {
|
|
|
201
216
|
//Optional: data-email-message
|
|
202
217
|
if (element.hasClass("validate-email") && isValid) {
|
|
203
218
|
var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
|
|
204
|
-
isValid =
|
|
219
|
+
isValid = value.search(emailRegEx) != -1;
|
|
205
220
|
if (element.data("emailMessage") != null)
|
|
206
221
|
errorMsg = element.data("emailMessage");
|
|
207
222
|
else
|
|
@@ -209,7 +224,7 @@ class Validation {
|
|
|
209
224
|
}
|
|
210
225
|
//Optional: data-digits-message
|
|
211
226
|
if (element.hasClass("validate-digits") && isValid) {
|
|
212
|
-
isValid =
|
|
227
|
+
isValid = value.match(/[0-9]*/)[0].length == value.length;
|
|
213
228
|
if (element.data("digitsMessage") != null)
|
|
214
229
|
errorMsg = element.data("digitsMessage");
|
|
215
230
|
else
|
|
@@ -220,7 +235,7 @@ class Validation {
|
|
|
220
235
|
if (element.hasClass("validate-compare") && isValid) {
|
|
221
236
|
if (element.data("compare") != null) {
|
|
222
237
|
const compareTo = new Element(document.getElementById(element.data("compare"))).val();
|
|
223
|
-
isValid = compareTo ==
|
|
238
|
+
isValid = compareTo == value;
|
|
224
239
|
if (element.data("compareMessage") != null)
|
|
225
240
|
errorMsg = element.data("compareMessage");
|
|
226
241
|
else
|
|
@@ -232,7 +247,7 @@ class Validation {
|
|
|
232
247
|
if (element.hasClass("validate-min-length") && isValid) {
|
|
233
248
|
if (element.data("minLength") != null) {
|
|
234
249
|
const maxLength = parseInt(element.data("minLength"));
|
|
235
|
-
isValid =
|
|
250
|
+
isValid = value.length >= maxLength;
|
|
236
251
|
if (element.data("minLengthMessage") != null)
|
|
237
252
|
errorMsg = element.data("minLengthMessage");
|
|
238
253
|
else
|
|
@@ -244,7 +259,7 @@ class Validation {
|
|
|
244
259
|
if (element.hasClass("validate-min-digits-length") && isValid) {
|
|
245
260
|
if (element.data("minDigitsLength") != null) {
|
|
246
261
|
const minLength = parseInt(element.data("minDigitsLength"));
|
|
247
|
-
isValid =
|
|
262
|
+
isValid = value.replace(/[^0-9]/g, "").length >= minLength;
|
|
248
263
|
if (element.data("minDigitsLengthMessage") != null)
|
|
249
264
|
errorMsg = element.data("minDigitsLengthMessage");
|
|
250
265
|
else
|
|
@@ -256,7 +271,7 @@ class Validation {
|
|
|
256
271
|
if (element.hasClass("validate-max-length") && isValid) {
|
|
257
272
|
if (element.data("maxLength") != null) {
|
|
258
273
|
const maxlength = parseInt(element.data("maxLength"));
|
|
259
|
-
isValid =
|
|
274
|
+
isValid = value.length <= maxlength;
|
|
260
275
|
if (element.data("maxLengthMessage") != null)
|
|
261
276
|
errorMsg = element.data("maxLengthMessage");
|
|
262
277
|
else
|
|
@@ -265,7 +280,7 @@ class Validation {
|
|
|
265
280
|
}
|
|
266
281
|
//Optional: data-date-message
|
|
267
282
|
if (element.hasClass("validate-date") && isValid) {
|
|
268
|
-
isValid = this.validateDate(
|
|
283
|
+
isValid = this.validateDate(value);
|
|
269
284
|
if (element.data("dateMessage") != null)
|
|
270
285
|
errorMsg = element.data("dateMessage");
|
|
271
286
|
else
|
|
@@ -276,8 +291,8 @@ class Validation {
|
|
|
276
291
|
if (element.hasClass("validate-max-value") && isValid) {
|
|
277
292
|
if (element.data("maxValue") != null) {
|
|
278
293
|
const maxvalue = parseFloat(element.data("maxValue"));
|
|
279
|
-
if (
|
|
280
|
-
isValid = parseFloat(
|
|
294
|
+
if (value.length > 0 && !isNaN(numericValue))
|
|
295
|
+
isValid = parseFloat(value) <= maxvalue;
|
|
281
296
|
if (element.data("maxvalueMessage") != null)
|
|
282
297
|
errorMsg = element.data("maxvalueMessage");
|
|
283
298
|
else
|
|
@@ -289,7 +304,7 @@ class Validation {
|
|
|
289
304
|
if (element.hasClass("validate-max-date") && isValid) {
|
|
290
305
|
if (element.data("maxDate") != null) {
|
|
291
306
|
const maxDate = new Date(element.data("maxDate"));
|
|
292
|
-
const day = new Date(
|
|
307
|
+
const day = new Date(value);
|
|
293
308
|
isValid = day <= maxDate;
|
|
294
309
|
if (element.data("maxDateMessage") != null)
|
|
295
310
|
errorMsg = element.data("maxDateMessage");
|
|
@@ -302,7 +317,7 @@ class Validation {
|
|
|
302
317
|
if (element.hasClass("validate-min-date") && isValid) {
|
|
303
318
|
if (element.data("minDate") != null) {
|
|
304
319
|
const minDate = new Date(element.data("minDate"));
|
|
305
|
-
const day = new Date(
|
|
320
|
+
const day = new Date(value);
|
|
306
321
|
isValid = day >= minDate;
|
|
307
322
|
if (element.data("minDateMessage") != null)
|
|
308
323
|
errorMsg = element.data("minDateMessage");
|
|
@@ -313,7 +328,7 @@ class Validation {
|
|
|
313
328
|
if (element.hasClass("validate-disallowed-days-of-week") && isValid) {
|
|
314
329
|
const disallowedDays = element.data("disallowedDaysOfWeek").toString().split(",");
|
|
315
330
|
try {
|
|
316
|
-
const day = new Date(
|
|
331
|
+
const day = new Date(value).getUTCDay().toString();
|
|
317
332
|
// Days in JS range from 0-6 where 0 is Sunday and 6 is Saturday
|
|
318
333
|
isValid = !disallowedDays.some(d => d == day);
|
|
319
334
|
if (!isValid) {
|
|
@@ -329,7 +344,7 @@ class Validation {
|
|
|
329
344
|
//Checking if control is valid and performing necessary action
|
|
330
345
|
if (isValid) {
|
|
331
346
|
errorRef.removeClass("error-background");
|
|
332
|
-
return true;
|
|
347
|
+
return { isValid: true, value };
|
|
333
348
|
}
|
|
334
349
|
else {
|
|
335
350
|
if (errorMsg !== "") {
|
|
@@ -344,7 +359,7 @@ class Validation {
|
|
|
344
359
|
if (!element.hasClass("validation-no-error-background")) {
|
|
345
360
|
errorRef.addClass("error-background");
|
|
346
361
|
}
|
|
347
|
-
return false;
|
|
362
|
+
return { isValid: false };
|
|
348
363
|
}
|
|
349
364
|
}
|
|
350
365
|
/**
|