@cocreate/validation 1.8.10 → 1.8.12
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/.github/FUNDING.yml +3 -3
- package/.github/workflows/automated.yml +95 -95
- package/.github/workflows/manual.yml +44 -44
- package/CHANGELOG.md +909 -895
- package/CONTRIBUTING.md +96 -96
- package/CoCreate.config.js +26 -26
- package/LICENSE +21 -21
- package/README.md +86 -86
- package/demo/index.html +20 -22
- package/docs/index.html +278 -102
- package/package.json +67 -67
- package/release.config.js +21 -21
- package/src/index.js +81 -81
- package/src/validations/matches.js +54 -54
- package/src/validations/required.js +30 -30
- package/src/validations/subdomain.js +64 -64
- package/src/validations/unique.js +24 -24
- package/webpack.config.js +84 -84
package/src/index.js
CHANGED
|
@@ -1,82 +1,82 @@
|
|
|
1
|
-
/********************************************************************************
|
|
2
|
-
* Copyright (C) 2020 CoCreate LLC.
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
* SPDX-License-Identifier: MIT
|
|
6
|
-
********************************************************************************/
|
|
7
|
-
|
|
8
|
-
/*globals CustomEvent*/
|
|
9
|
-
import action from '@cocreate/actions';
|
|
10
|
-
// import render from '@cocreate/render';
|
|
11
|
-
import {matches} from './validations/matches';
|
|
12
|
-
import {required} from './validations/required';
|
|
13
|
-
import {unique} from './validations/unique';
|
|
14
|
-
import {subdomain} from './validations/subdomain';
|
|
15
|
-
|
|
16
|
-
const validations = new Map();
|
|
17
|
-
validations.set('matches', matches);
|
|
18
|
-
validations.set('required', required);
|
|
19
|
-
validations.set('subdomain', subdomain);
|
|
20
|
-
validations.set('unique', unique);
|
|
21
|
-
|
|
22
|
-
const selectors = '[matches], [required], [unique], [subdomain]';
|
|
23
|
-
|
|
24
|
-
function validate(btn, params) {
|
|
25
|
-
let validateElements;
|
|
26
|
-
let validateSelectors = [];
|
|
27
|
-
let failedElements = [];
|
|
28
|
-
|
|
29
|
-
if (params){
|
|
30
|
-
let selector = params
|
|
31
|
-
for (let [validation] of validations){
|
|
32
|
-
let vSelctor = `${selector}[${validation}]`;
|
|
33
|
-
validateSelectors.push(vSelctor);
|
|
34
|
-
}
|
|
35
|
-
let validSelectors = validateSelectors.join(', ');
|
|
36
|
-
validateElements = document.querySelectorAll(validSelectors);
|
|
37
|
-
if (!validateElements.length){
|
|
38
|
-
let element = document.querySelector(selector);
|
|
39
|
-
if (element)
|
|
40
|
-
validateElements = element.querySelectorAll(selectors);
|
|
41
|
-
}
|
|
42
|
-
} else {
|
|
43
|
-
let element = btn.closest('form');
|
|
44
|
-
validateElements = element.querySelectorAll(selectors);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
for (let [validation, func] of validations){
|
|
49
|
-
let elements = [];
|
|
50
|
-
for (let element of validateElements){
|
|
51
|
-
// let validationSelectors = element.getAttribute('validate').replace(/ /g, '').split(',');
|
|
52
|
-
if (element.hasAttribute(validation)){
|
|
53
|
-
elements.push(element);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
if (elements.length){
|
|
57
|
-
let failedEls = func(elements);
|
|
58
|
-
if (failedEls)
|
|
59
|
-
failedElements.push(failedEls);
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
for (let element of validateElements){
|
|
63
|
-
let isValid = element.getAttribute('validation');
|
|
64
|
-
if (isValid == 'false')
|
|
65
|
-
failedElements.push(element);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
if (failedElements.length == 0){
|
|
69
|
-
document.dispatchEvent(new CustomEvent('validate', {
|
|
70
|
-
detail: {}
|
|
71
|
-
}));
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
action.init({
|
|
76
|
-
name: "validate",
|
|
77
|
-
callback: (btn, params) => {
|
|
78
|
-
validate(btn, params);
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
|
|
1
|
+
/********************************************************************************
|
|
2
|
+
* Copyright (C) 2020 CoCreate LLC.
|
|
3
|
+
*
|
|
4
|
+
*
|
|
5
|
+
* SPDX-License-Identifier: MIT
|
|
6
|
+
********************************************************************************/
|
|
7
|
+
|
|
8
|
+
/*globals CustomEvent*/
|
|
9
|
+
import action from '@cocreate/actions';
|
|
10
|
+
// import render from '@cocreate/render';
|
|
11
|
+
import {matches} from './validations/matches';
|
|
12
|
+
import {required} from './validations/required';
|
|
13
|
+
import {unique} from './validations/unique';
|
|
14
|
+
import {subdomain} from './validations/subdomain';
|
|
15
|
+
|
|
16
|
+
const validations = new Map();
|
|
17
|
+
validations.set('matches', matches);
|
|
18
|
+
validations.set('required', required);
|
|
19
|
+
validations.set('subdomain', subdomain);
|
|
20
|
+
validations.set('unique', unique);
|
|
21
|
+
|
|
22
|
+
const selectors = '[matches], [required], [unique], [subdomain]';
|
|
23
|
+
|
|
24
|
+
function validate(btn, params) {
|
|
25
|
+
let validateElements;
|
|
26
|
+
let validateSelectors = [];
|
|
27
|
+
let failedElements = [];
|
|
28
|
+
|
|
29
|
+
if (params){
|
|
30
|
+
let selector = params
|
|
31
|
+
for (let [validation] of validations){
|
|
32
|
+
let vSelctor = `${selector}[${validation}]`;
|
|
33
|
+
validateSelectors.push(vSelctor);
|
|
34
|
+
}
|
|
35
|
+
let validSelectors = validateSelectors.join(', ');
|
|
36
|
+
validateElements = document.querySelectorAll(validSelectors);
|
|
37
|
+
if (!validateElements.length){
|
|
38
|
+
let element = document.querySelector(selector);
|
|
39
|
+
if (element)
|
|
40
|
+
validateElements = element.querySelectorAll(selectors);
|
|
41
|
+
}
|
|
42
|
+
} else {
|
|
43
|
+
let element = btn.closest('form');
|
|
44
|
+
validateElements = element.querySelectorAll(selectors);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
for (let [validation, func] of validations){
|
|
49
|
+
let elements = [];
|
|
50
|
+
for (let element of validateElements){
|
|
51
|
+
// let validationSelectors = element.getAttribute('validate').replace(/ /g, '').split(',');
|
|
52
|
+
if (element.hasAttribute(validation)){
|
|
53
|
+
elements.push(element);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
if (elements.length){
|
|
57
|
+
let failedEls = func(elements);
|
|
58
|
+
if (failedEls)
|
|
59
|
+
failedElements.push(failedEls);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
for (let element of validateElements){
|
|
63
|
+
let isValid = element.getAttribute('validation');
|
|
64
|
+
if (isValid == 'false')
|
|
65
|
+
failedElements.push(element);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
if (failedElements.length == 0){
|
|
69
|
+
document.dispatchEvent(new CustomEvent('validate', {
|
|
70
|
+
detail: {}
|
|
71
|
+
}));
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
action.init({
|
|
76
|
+
name: "validate",
|
|
77
|
+
callback: (btn, params) => {
|
|
78
|
+
validate(btn, params);
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
|
|
82
82
|
export default {validations};
|
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
import render from '@cocreate/render';
|
|
2
|
-
|
|
3
|
-
function initMatches(){
|
|
4
|
-
let elements = document.querySelectorAll('[matches]');
|
|
5
|
-
for (let element of elements){
|
|
6
|
-
let targetSelector = element.getAttribute('matches');
|
|
7
|
-
let target = document.querySelector(targetSelector);
|
|
8
|
-
element.validations = {matches: target};
|
|
9
|
-
element.addEventListener('input', validateMatchEvent);
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function validateMatchEvent(e){
|
|
14
|
-
validateMatch(e.target);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
function validateMatch(element){
|
|
18
|
-
// let element = e.target;
|
|
19
|
-
let target = element.validations.matches;
|
|
20
|
-
if (target.value == element.value){
|
|
21
|
-
target.setAttribute('validation', 'true');
|
|
22
|
-
element.setAttribute('validation', 'true');
|
|
23
|
-
}
|
|
24
|
-
else {
|
|
25
|
-
target.setAttribute('validation', 'false');
|
|
26
|
-
element.setAttribute('validation', 'false');
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
function matches(elements){
|
|
31
|
-
let failedElements = [];
|
|
32
|
-
for (let element of elements) {
|
|
33
|
-
let isValid = element.getAttribute('validation');
|
|
34
|
-
if (isValid == 'false'){
|
|
35
|
-
failedElements.push(element);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
if (failedElements.length){
|
|
39
|
-
render.data({
|
|
40
|
-
selector: "[template='validate']",
|
|
41
|
-
data: {
|
|
42
|
-
type: 'matches',
|
|
43
|
-
status: 'failed',
|
|
44
|
-
message: 'One or more values do not match',
|
|
45
|
-
selector: '[matches][validation="false"]',
|
|
46
|
-
elements: failedElements
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
return failedElements;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
initMatches();
|
|
54
|
-
|
|
1
|
+
import render from '@cocreate/render';
|
|
2
|
+
|
|
3
|
+
function initMatches(){
|
|
4
|
+
let elements = document.querySelectorAll('[matches]');
|
|
5
|
+
for (let element of elements){
|
|
6
|
+
let targetSelector = element.getAttribute('matches');
|
|
7
|
+
let target = document.querySelector(targetSelector);
|
|
8
|
+
element.validations = {matches: target};
|
|
9
|
+
element.addEventListener('input', validateMatchEvent);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
function validateMatchEvent(e){
|
|
14
|
+
validateMatch(e.target);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
function validateMatch(element){
|
|
18
|
+
// let element = e.target;
|
|
19
|
+
let target = element.validations.matches;
|
|
20
|
+
if (target.value == element.value){
|
|
21
|
+
target.setAttribute('validation', 'true');
|
|
22
|
+
element.setAttribute('validation', 'true');
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
target.setAttribute('validation', 'false');
|
|
26
|
+
element.setAttribute('validation', 'false');
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function matches(elements){
|
|
31
|
+
let failedElements = [];
|
|
32
|
+
for (let element of elements) {
|
|
33
|
+
let isValid = element.getAttribute('validation');
|
|
34
|
+
if (isValid == 'false'){
|
|
35
|
+
failedElements.push(element);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
if (failedElements.length){
|
|
39
|
+
render.data({
|
|
40
|
+
selector: "[template='validate']",
|
|
41
|
+
data: {
|
|
42
|
+
type: 'matches',
|
|
43
|
+
status: 'failed',
|
|
44
|
+
message: 'One or more values do not match',
|
|
45
|
+
selector: '[matches][validation="false"]',
|
|
46
|
+
elements: failedElements
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
return failedElements;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
initMatches();
|
|
54
|
+
|
|
55
55
|
export {matches};
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
// import {validations} from '../index.js';
|
|
2
|
-
import render from '@cocreate/render';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export var required = (elements) => {
|
|
6
|
-
let failedElements = [];
|
|
7
|
-
for (let element of elements){
|
|
8
|
-
let value = element.getValue();
|
|
9
|
-
if (value){
|
|
10
|
-
element.setAttribute('validation', 'true');
|
|
11
|
-
}
|
|
12
|
-
else {
|
|
13
|
-
element.setAttribute('validation', 'false');
|
|
14
|
-
failedElements.push(element);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
if (failedElements.length){
|
|
18
|
-
render.data({
|
|
19
|
-
selector: "[template='validate']",
|
|
20
|
-
data: {
|
|
21
|
-
type: 'unique',
|
|
22
|
-
status: 'failed',
|
|
23
|
-
message: 'One or more required fields are missing values',
|
|
24
|
-
selector: '[required][validation="false"]',
|
|
25
|
-
elements: failedElements
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
return failedElements;
|
|
29
|
-
}
|
|
30
|
-
};
|
|
1
|
+
// import {validations} from '../index.js';
|
|
2
|
+
import render from '@cocreate/render';
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
export var required = (elements) => {
|
|
6
|
+
let failedElements = [];
|
|
7
|
+
for (let element of elements){
|
|
8
|
+
let value = element.getValue();
|
|
9
|
+
if (value){
|
|
10
|
+
element.setAttribute('validation', 'true');
|
|
11
|
+
}
|
|
12
|
+
else {
|
|
13
|
+
element.setAttribute('validation', 'false');
|
|
14
|
+
failedElements.push(element);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
if (failedElements.length){
|
|
18
|
+
render.data({
|
|
19
|
+
selector: "[template='validate']",
|
|
20
|
+
data: {
|
|
21
|
+
type: 'unique',
|
|
22
|
+
status: 'failed',
|
|
23
|
+
message: 'One or more required fields are missing values',
|
|
24
|
+
selector: '[required][validation="false"]',
|
|
25
|
+
elements: failedElements
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
return failedElements;
|
|
29
|
+
}
|
|
30
|
+
};
|
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
import render from '@cocreate/render';
|
|
2
|
-
|
|
3
|
-
function initSubdomain(){
|
|
4
|
-
let elements = document.querySelectorAll('[subdomain]');
|
|
5
|
-
for (let element of elements){
|
|
6
|
-
element.addEventListener('input', validateSubdomainEvent);
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
function validateSubdomainEvent(e){
|
|
11
|
-
validateSubdomain(e.target);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
function validateSubdomain(element){
|
|
15
|
-
let subdomain = element.getValue();
|
|
16
|
-
let validation = 'false';
|
|
17
|
-
if (Array.isArray(subdomain))
|
|
18
|
-
subdomain = subdomain[0]
|
|
19
|
-
let array = subdomain.split('.');
|
|
20
|
-
if (array.length -1 == 2){
|
|
21
|
-
validation = 'true';
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
const pattern = /^[a-z0-9][a-z0-9\-]*[a-z0-9]$/;
|
|
25
|
-
if (validation != 'false' && pattern.test(array[0])){
|
|
26
|
-
validation = 'true';
|
|
27
|
-
}
|
|
28
|
-
else
|
|
29
|
-
validation = 'false';
|
|
30
|
-
// let array = subdomain.split('.').length -1;
|
|
31
|
-
// if (validation && array == 2){
|
|
32
|
-
// validation = 'true';
|
|
33
|
-
// }
|
|
34
|
-
|
|
35
|
-
element.setAttribute('validation', validation);
|
|
36
|
-
return validation;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
function subdomain(elements){
|
|
40
|
-
let failedElements = [];
|
|
41
|
-
for (let element of elements) {
|
|
42
|
-
// let isValid = element.getAttribute('subdomain');
|
|
43
|
-
let isValid = validateSubdomain(element);
|
|
44
|
-
if (isValid == 'false'){
|
|
45
|
-
failedElements.push(element);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
if (failedElements.length){
|
|
49
|
-
render.data({
|
|
50
|
-
selector: "[template='validate']",
|
|
51
|
-
data: {
|
|
52
|
-
type: 'subdomain',
|
|
53
|
-
status: 'failed',
|
|
54
|
-
message: 'Enter a valid subdomain. subdomain can only be one level.',
|
|
55
|
-
selector: '[subdomain][validation="false"]',
|
|
56
|
-
elements: failedElements
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
return failedElements;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
initSubdomain();
|
|
64
|
-
|
|
1
|
+
import render from '@cocreate/render';
|
|
2
|
+
|
|
3
|
+
function initSubdomain(){
|
|
4
|
+
let elements = document.querySelectorAll('[subdomain]');
|
|
5
|
+
for (let element of elements){
|
|
6
|
+
element.addEventListener('input', validateSubdomainEvent);
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
function validateSubdomainEvent(e){
|
|
11
|
+
validateSubdomain(e.target);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
function validateSubdomain(element){
|
|
15
|
+
let subdomain = element.getValue();
|
|
16
|
+
let validation = 'false';
|
|
17
|
+
if (Array.isArray(subdomain))
|
|
18
|
+
subdomain = subdomain[0]
|
|
19
|
+
let array = subdomain.split('.');
|
|
20
|
+
if (array.length -1 == 2){
|
|
21
|
+
validation = 'true';
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const pattern = /^[a-z0-9][a-z0-9\-]*[a-z0-9]$/;
|
|
25
|
+
if (validation != 'false' && pattern.test(array[0])){
|
|
26
|
+
validation = 'true';
|
|
27
|
+
}
|
|
28
|
+
else
|
|
29
|
+
validation = 'false';
|
|
30
|
+
// let array = subdomain.split('.').length -1;
|
|
31
|
+
// if (validation && array == 2){
|
|
32
|
+
// validation = 'true';
|
|
33
|
+
// }
|
|
34
|
+
|
|
35
|
+
element.setAttribute('validation', validation);
|
|
36
|
+
return validation;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
function subdomain(elements){
|
|
40
|
+
let failedElements = [];
|
|
41
|
+
for (let element of elements) {
|
|
42
|
+
// let isValid = element.getAttribute('subdomain');
|
|
43
|
+
let isValid = validateSubdomain(element);
|
|
44
|
+
if (isValid == 'false'){
|
|
45
|
+
failedElements.push(element);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
if (failedElements.length){
|
|
49
|
+
render.data({
|
|
50
|
+
selector: "[template='validate']",
|
|
51
|
+
data: {
|
|
52
|
+
type: 'subdomain',
|
|
53
|
+
status: 'failed',
|
|
54
|
+
message: 'Enter a valid subdomain. subdomain can only be one level.',
|
|
55
|
+
selector: '[subdomain][validation="false"]',
|
|
56
|
+
elements: failedElements
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
return failedElements;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
initSubdomain();
|
|
64
|
+
|
|
65
65
|
export {subdomain};
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import render from '@cocreate/render';
|
|
2
|
-
|
|
3
|
-
export const unique = (elements) => {
|
|
4
|
-
let failedElements = [];
|
|
5
|
-
for (let element of elements) {
|
|
6
|
-
let unique = element.getAttribute('unique');
|
|
7
|
-
if (unique == 'false') {
|
|
8
|
-
failedElements.push(element);
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
if (failedElements.length) {
|
|
12
|
-
render.data({
|
|
13
|
-
selector: "[template='validate']",
|
|
14
|
-
data: {
|
|
15
|
-
type: 'unique',
|
|
16
|
-
status: 'failed',
|
|
17
|
-
message: 'One or more values are not unique',
|
|
18
|
-
selector: '[unique="false"]',
|
|
19
|
-
elements: failedElements
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
return failedElements;
|
|
23
|
-
}
|
|
24
|
-
};
|
|
1
|
+
import render from '@cocreate/render';
|
|
2
|
+
|
|
3
|
+
export const unique = (elements) => {
|
|
4
|
+
let failedElements = [];
|
|
5
|
+
for (let element of elements) {
|
|
6
|
+
let unique = element.getAttribute('unique');
|
|
7
|
+
if (unique == 'false') {
|
|
8
|
+
failedElements.push(element);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
if (failedElements.length) {
|
|
12
|
+
render.data({
|
|
13
|
+
selector: "[template='validate']",
|
|
14
|
+
data: {
|
|
15
|
+
type: 'unique',
|
|
16
|
+
status: 'failed',
|
|
17
|
+
message: 'One or more values are not unique',
|
|
18
|
+
selector: '[unique="false"]',
|
|
19
|
+
elements: failedElements
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
return failedElements;
|
|
23
|
+
}
|
|
24
|
+
};
|