@cocreate/validation 1.22.0 → 2.0.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.
- package/.github/FUNDING.yml +1 -1
- package/.github/workflows/automated.yml +18 -7
- package/CHANGELOG.md +426 -394
- package/CONTRIBUTING.md +6 -6
- package/README.md +21 -19
- package/demo/index.html +2 -2
- package/docs/index.html +4 -4
- package/package.json +5 -5
- package/src/index.js +105 -3
- package/src/validations/unique.js +0 -32
package/CONTRIBUTING.md
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
# Contributing to CoCreate-validation
|
|
2
2
|
|
|
3
|
-
This project is work of [many contributors](https://github.com/
|
|
4
|
-
You're encouraged to submit [pull requests](https://github.com/
|
|
5
|
-
[propose features and discuss issues](https://github.com/
|
|
3
|
+
This project is work of [many contributors](https://github.com/CoCreateJS/validation/graphs/contributors).
|
|
4
|
+
You're encouraged to submit [pull requests](https://github.com/CoCreateJS/validation/pulls),
|
|
5
|
+
[propose features and discuss issues](https://github.com/CoCreateJS/validation/issues).
|
|
6
6
|
|
|
7
7
|
In the examples below, substitute your Github username for `contributor` in URLs.
|
|
8
8
|
|
|
9
9
|
## Fork the Project
|
|
10
10
|
|
|
11
|
-
Fork the [project on Github](https://github.com/
|
|
11
|
+
Fork the [project on Github](https://github.com/CoCreateJS/validation) and check out your copy.
|
|
12
12
|
|
|
13
13
|
```
|
|
14
14
|
git clone https://github.com/contributor/CoCreate-validation.git
|
|
15
15
|
cd CoCreate-validation
|
|
16
|
-
git remote add upstream https://
|
|
16
|
+
git remote add upstream https://github.com/CoCreateJS/validation.git
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
## Create a Topic Branch
|
|
@@ -75,7 +75,7 @@ git push origin my-feature-branch
|
|
|
75
75
|
|
|
76
76
|
## Make a Pull Request
|
|
77
77
|
|
|
78
|
-
Go to [https://github.com/
|
|
78
|
+
Go to [https://github.com/CoCreateJS/validation](https://github.com/CoCreateJS/validation) and select your feature branch.
|
|
79
79
|
Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
|
|
80
80
|
|
|
81
81
|
## Rebase
|
package/README.md
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
# CoCreate-validation
|
|
2
2
|
|
|
3
|
-
A simple validation component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API. Take it for a spin in our [playground!](https://
|
|
3
|
+
A simple validation component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API. Take it for a spin in our [playground!](https://CoCreateJS.com/docs/validation)
|
|
4
4
|
|
|
5
|
-

|
|
6
|
+

|
|
7
|
+

|
|
8
|
+

|
|
9
|
+

|
|
10
10
|

|
|
11
11
|
|
|
12
|
-

|
|
13
13
|
|
|
14
|
-
## [Docs & Demo](https://
|
|
14
|
+
## [Docs & Demo](https://CoCreateJS.com/docs/validation)
|
|
15
15
|
|
|
16
|
-
For a complete guide and working demo refer to the [doumentation](https://
|
|
16
|
+
For a complete guide and working demo refer to the [doumentation](https://CoCreateJS.com/docs/validation)
|
|
17
17
|
|
|
18
18
|
## CDN
|
|
19
19
|
|
|
20
20
|
```html
|
|
21
|
-
<script src="https://cdn.
|
|
21
|
+
<script src="https://cdn.CoCreateJS.com/validation/latest/CoCreate-validation.min.js"></script>
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
```html
|
|
25
|
-
<script src="https://cdn.
|
|
25
|
+
<script src="https://cdn.CoCreateJS.com/validation/latest/CoCreate-validation.min.css"></script>
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
## NPM
|
|
@@ -50,13 +50,13 @@ $ yarn install @cocreate/validation
|
|
|
50
50
|
|
|
51
51
|
# Announcements
|
|
52
52
|
|
|
53
|
-
All updates to this library are documented in our [CHANGELOG](https://github.com/
|
|
53
|
+
All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreateJS/validation/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreateJS/validation/releases). You may also subscribe to email for releases and breaking changes.
|
|
54
54
|
|
|
55
55
|
<a name="roadmap"></a>
|
|
56
56
|
|
|
57
57
|
# Roadmap
|
|
58
58
|
|
|
59
|
-
If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/
|
|
59
|
+
If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreateJS/validation/issues) and [pull requests](https://github.com/CoCreateJS/validation/pulls). We would love to hear your feedback.
|
|
60
60
|
|
|
61
61
|
<a name="about"></a>
|
|
62
62
|
|
|
@@ -64,7 +64,7 @@ If you are interested in the future direction of this project, please take a loo
|
|
|
64
64
|
|
|
65
65
|
CoCreate-validation is guided and supported by the CoCreate Developer Experience Team.
|
|
66
66
|
|
|
67
|
-
Please Email the Developer Experience Team [here](mailto:develop@
|
|
67
|
+
Please Email the Developer Experience Team [here](mailto:develop@CoCreateJS.com) in case of any queries.
|
|
68
68
|
|
|
69
69
|
CoCreate-validation is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
|
|
70
70
|
|
|
@@ -72,9 +72,9 @@ CoCreate-validation is maintained and funded by CoCreate. The names and logos fo
|
|
|
72
72
|
|
|
73
73
|
# How to Contribute
|
|
74
74
|
|
|
75
|
-
We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/
|
|
75
|
+
We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreateJS/validation/blob/master/CONTRIBUTING.md) guide for details.
|
|
76
76
|
|
|
77
|
-
We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/
|
|
77
|
+
We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreateJS/validation/issues) and [pull requests](https://github.com/CoCreateJS/validation/pulls) or merely upvote or comment on existing issues or pull requests.
|
|
78
78
|
|
|
79
79
|
We appreciate your continued support, thank you!
|
|
80
80
|
|
|
@@ -84,9 +84,9 @@ We appreciate your continued support, thank you!
|
|
|
84
84
|
|
|
85
85
|
This software is dual-licensed under the GNU Affero General Public License version 3 (AGPLv3) and a commercial license.
|
|
86
86
|
|
|
87
|
-
- **Open Source Use**: For open-source projects and non-commercial use, this software is available under the AGPLv3. The AGPLv3 allows you to freely use, modify, and distribute this software, provided that all modifications and derivative works are also licensed under the AGPLv3. For the full license text, see the [LICENSE file](https://github.com/
|
|
87
|
+
- **Open Source Use**: For open-source projects and non-commercial use, this software is available under the AGPLv3. The AGPLv3 allows you to freely use, modify, and distribute this software, provided that all modifications and derivative works are also licensed under the AGPLv3. For the full license text, see the [LICENSE file](https://github.com/CoCreateJS/validation/blob/master/LICENSE).
|
|
88
88
|
|
|
89
|
-
- **Commercial Use**: For-profit companies and individuals intending to use this software for commercial purposes must obtain a commercial license. The commercial license is available when you sign up for an API key on our [website](https://
|
|
89
|
+
- **Commercial Use**: For-profit companies and individuals intending to use this software for commercial purposes must obtain a commercial license. The commercial license is available when you sign up for an API key on our [website](https://CoCreateJS.com). This license permits proprietary use and modification of the software without the copyleft requirements of the AGPLv3. It is ideal for integrating this software into proprietary commercial products and applications.
|
|
90
90
|
|
|
91
91
|
If you have not purchased a commercial license and intend to use this software for commercial purposes, you are required to sign up for an API key on our website.
|
|
92
92
|
|
|
@@ -108,7 +108,9 @@ Disabled controls and controls barred from native validation are skipped.
|
|
|
108
108
|
`novalidate` on the form or `formnovalidate` on the action element skips the native
|
|
109
109
|
checks; explicitly configured CoCreate rules still run.
|
|
110
110
|
|
|
111
|
-
Custom `matches`
|
|
111
|
+
Custom `matches` validators are awaited. A `valid="false"` value marks the
|
|
112
|
+
element invalid; `valid="true"` passes this rule. Validation writes its
|
|
113
|
+
combined result to `validation` and `aria-invalid`. Use native `required`,
|
|
112
114
|
`type="email"`, `pattern`, and `minlength`/`maxlength` attributes for browser
|
|
113
115
|
constraints; the custom `email`, `subdomain`, and `length` attributes have been
|
|
114
116
|
removed. Non-native elements need their own custom validation.
|
package/demo/index.html
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
</head>
|
|
15
15
|
|
|
16
16
|
<body>
|
|
17
|
-
<!--<script src="https://cdn.
|
|
18
|
-
<script src="https://
|
|
17
|
+
<!--<script src="https://cdn.CoCreateJS.com/validation/latest/CoCreate-validation.min.js"></script>-->
|
|
18
|
+
<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
|
|
19
19
|
</body>
|
|
20
20
|
</html>
|
package/docs/index.html
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
rel="icon"
|
|
10
10
|
type="image/png"
|
|
11
11
|
sizes="32x32"
|
|
12
|
-
href="https://
|
|
12
|
+
href="https://CoCreateJS.com/images/favicon.ico" />
|
|
13
13
|
<meta
|
|
14
14
|
name="description"
|
|
15
15
|
content="A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable." />
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
share-width="500"
|
|
69
69
|
share-media="https://via.placeholder.com/300/09f/fff.png">
|
|
70
70
|
<a
|
|
71
|
-
href="https://github.com/
|
|
71
|
+
href="https://github.com/CoCreateJS/CoCreate-validation"
|
|
72
72
|
target="_blank"
|
|
73
73
|
class="margin-right:15px"
|
|
74
74
|
><i src="/assets/svg/github.svg"></i
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
<pre
|
|
113
113
|
class="margin-top:15px"><code class="language-javascript">npm install cocreate-validation</code></pre>
|
|
114
114
|
<p class="padding:10px_0px">Or you can use cdn link:</p>
|
|
115
|
-
<pre><code class="language-javascript">https://cdn.
|
|
115
|
+
<pre><code class="language-javascript">https://cdn.CoCreateJS.com/js/CoCreate-validation.min.js</code></pre>
|
|
116
116
|
|
|
117
117
|
<h2
|
|
118
118
|
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
|
|
@@ -258,6 +258,6 @@
|
|
|
258
258
|
</div>
|
|
259
259
|
</div>
|
|
260
260
|
</main>
|
|
261
|
-
<script src="https://
|
|
261
|
+
<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
|
|
262
262
|
</body>
|
|
263
263
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/validation",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "A simple validation component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"validation",
|
|
@@ -22,17 +22,17 @@
|
|
|
22
22
|
},
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
25
|
-
"url": "git+https://
|
|
25
|
+
"url": "git+https://github.com/CoCreateJS/validation.git"
|
|
26
26
|
},
|
|
27
27
|
"author": "CoCreate LLC",
|
|
28
28
|
"license": "AGPL-3.0",
|
|
29
29
|
"bugs": {
|
|
30
|
-
"url": "https://github.com/
|
|
30
|
+
"url": "https://github.com/CoCreateJS/validation/issues"
|
|
31
31
|
},
|
|
32
|
-
"homepage": "https://
|
|
32
|
+
"homepage": "https://CoCreateJS.com/docs/validation",
|
|
33
33
|
"funding": {
|
|
34
34
|
"type": "GitHub Sponsors ❤",
|
|
35
|
-
"url": "https://github.com/sponsors/
|
|
35
|
+
"url": "https://github.com/sponsors/CoCreateJS"
|
|
36
36
|
},
|
|
37
37
|
"main": "./src/index.js",
|
|
38
38
|
"dependencies": {
|
package/src/index.js
CHANGED
|
@@ -10,14 +10,35 @@ import "@cocreate/element-prototype";
|
|
|
10
10
|
import { render } from "@cocreate/render";
|
|
11
11
|
import { clearError, errorTargets, renderErrors } from "./messages.js";
|
|
12
12
|
import { matches } from "./validations/matches.js";
|
|
13
|
-
import { unique } from "./validations/unique.js";
|
|
14
13
|
import { value } from "./validations/value.js";
|
|
15
14
|
|
|
15
|
+
/**
|
|
16
|
+
*
|
|
17
|
+
* @public
|
|
18
|
+
* @environment client
|
|
19
|
+
*/
|
|
16
20
|
const validations = new Map();
|
|
17
21
|
validations.set("matches", matches);
|
|
18
|
-
validations.set("
|
|
22
|
+
validations.set("valid", validState);
|
|
19
23
|
validations.set("validate", value);
|
|
20
24
|
|
|
25
|
+
function validState(elements, report = renderErrors) {
|
|
26
|
+
const failedElements = elements.filter(element => element.getAttribute("valid") === "false");
|
|
27
|
+
|
|
28
|
+
if (failedElements.length) {
|
|
29
|
+
report({
|
|
30
|
+
data: failedElements.map(element => ({
|
|
31
|
+
type: "valid",
|
|
32
|
+
status: "error",
|
|
33
|
+
success: false,
|
|
34
|
+
message: element.validationMessage || "This value is not valid.",
|
|
35
|
+
elements: [element]
|
|
36
|
+
}))
|
|
37
|
+
});
|
|
38
|
+
return failedElements;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
21
42
|
async function validate(action) {
|
|
22
43
|
try {
|
|
23
44
|
const selectors = [...validations.keys()].map(name => `[${name}]`).concat("[component][required]").join(", ");
|
|
@@ -90,7 +111,8 @@ async function validate(action) {
|
|
|
90
111
|
}
|
|
91
112
|
|
|
92
113
|
function markValidity(element, valid) {
|
|
93
|
-
|
|
114
|
+
const state = String(valid);
|
|
115
|
+
element.setAttribute("validation", state);
|
|
94
116
|
element.setAttribute("aria-invalid", String(!valid));
|
|
95
117
|
if (valid) clearError(element);
|
|
96
118
|
}
|
|
@@ -98,3 +120,83 @@ function markValidity(element, valid) {
|
|
|
98
120
|
actions.init({ name: "validate", callback: validate });
|
|
99
121
|
|
|
100
122
|
export default { validations };
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
*
|
|
126
|
+
* @name aria-errormessage
|
|
127
|
+
* @kind member
|
|
128
|
+
* @attribute
|
|
129
|
+
* @environment client
|
|
130
|
+
*/
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
*
|
|
134
|
+
* @name aria-invalid
|
|
135
|
+
* @kind member
|
|
136
|
+
* @attribute
|
|
137
|
+
* @environment client
|
|
138
|
+
*/
|
|
139
|
+
|
|
140
|
+
/**
|
|
141
|
+
*
|
|
142
|
+
* @name match
|
|
143
|
+
* @kind member
|
|
144
|
+
* @attribute
|
|
145
|
+
* @environment client
|
|
146
|
+
*/
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
*
|
|
150
|
+
* @name match-query
|
|
151
|
+
* @kind member
|
|
152
|
+
* @attribute
|
|
153
|
+
* @environment client
|
|
154
|
+
*/
|
|
155
|
+
|
|
156
|
+
/**
|
|
157
|
+
*
|
|
158
|
+
* @name required
|
|
159
|
+
* @kind member
|
|
160
|
+
* @attribute
|
|
161
|
+
* @environment client
|
|
162
|
+
*/
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
*
|
|
166
|
+
* @name valid
|
|
167
|
+
* @kind member
|
|
168
|
+
* @attribute
|
|
169
|
+
* @environment client
|
|
170
|
+
*/
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
*
|
|
174
|
+
* @name validation
|
|
175
|
+
* @kind member
|
|
176
|
+
* @attribute
|
|
177
|
+
* @environment client
|
|
178
|
+
*/
|
|
179
|
+
|
|
180
|
+
/**
|
|
181
|
+
* A simple validation component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.
|
|
182
|
+
*
|
|
183
|
+
* @module validation
|
|
184
|
+
* @environment client
|
|
185
|
+
*/
|
|
186
|
+
|
|
187
|
+
/**
|
|
188
|
+
* Declarative selectors recognized by this module.
|
|
189
|
+
*
|
|
190
|
+
* @name declarative-selectors
|
|
191
|
+
* @kind member
|
|
192
|
+
* @selectors
|
|
193
|
+
* @environment client
|
|
194
|
+
* @example
|
|
195
|
+
* ```json
|
|
196
|
+
* [
|
|
197
|
+
* "[template~=\"notification\"]",
|
|
198
|
+
* "[match-query][match=\"false\"]",
|
|
199
|
+
* "[valid=\"false\"]"
|
|
200
|
+
* ]
|
|
201
|
+
* ```
|
|
202
|
+
*/
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { errorTargets, renderErrors } from "../messages.js";
|
|
2
|
-
|
|
3
|
-
export const unique = async (elements, report = renderErrors) => {
|
|
4
|
-
let failedElements = [];
|
|
5
|
-
for (let element of elements) {
|
|
6
|
-
let unique = element.getAttribute('unique');
|
|
7
|
-
if (unique === '')
|
|
8
|
-
unique = await CoCreate.unique.isUnique(element)
|
|
9
|
-
if (unique === 'false' || unique === false) {
|
|
10
|
-
failedElements.push(element);
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
if (failedElements.length) {
|
|
14
|
-
const unlinkedElements = failedElements.filter(
|
|
15
|
-
element => !errorTargets(element).length
|
|
16
|
-
);
|
|
17
|
-
if (unlinkedElements.length) {
|
|
18
|
-
report({
|
|
19
|
-
selector: '[template~="notification"]',
|
|
20
|
-
data: [{
|
|
21
|
-
type: 'unique',
|
|
22
|
-
status: 'error',
|
|
23
|
-
success: false,
|
|
24
|
-
message: 'One or more values are not unique',
|
|
25
|
-
selector: '[unique="false"]',
|
|
26
|
-
elements: unlinkedElements
|
|
27
|
-
}]
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
return failedElements;
|
|
31
|
-
}
|
|
32
|
-
};
|