avalynx-form 1.0.4 → 1.0.6
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/LICENSE +1 -1
- package/README.de.md +14 -13
- package/README.md +13 -10
- package/dist/js/avalynx-form.esm.js +19 -9
- package/dist/js/avalynx-form.js +19 -9
- package/package.json +2 -2
package/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c) 2024 Juergen Schwind an the
|
|
3
|
+
Copyright (c) 2024 Juergen Schwind an the AvalynxForm Authors
|
|
4
4
|
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
package/README.de.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# AvalynxForm
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/avalynx-form)
|
|
4
|
+
[](https://www.npmjs.com/package/avalynx-form)
|
|
5
|
+
[](https://www.jsdelivr.com/package/npm/avalynx-form)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
[](https://github.com/avalynx/avalynx-form/actions/workflows/tests.yml)
|
|
8
|
+
[](https://codecov.io/gh/avalynx/avalynx-form)
|
|
9
|
+
[](https://github.com/avalynx/avalynx-form)
|
|
10
10
|
|
|
11
11
|
AvalynxForm ist eine leichtgewichtige, anpassbare Formular-Handling-Bibliothek für Webanwendungen. Basierend auf Bootstrap >=5.3 ohne jegliche Framework-Abhängigkeiten.
|
|
12
12
|
|
|
@@ -16,14 +16,15 @@ AvalynxForm ist eine leichtgewichtige, anpassbare Formular-Handling-Bibliothek f
|
|
|
16
16
|
- **Bootstrap-Integration**: Entwickelt für die nahtlose Integration mit Bootstrap >= 5.3.
|
|
17
17
|
- **Einfach zu bedienen**: Einfache API zur Erstellung und Verwaltung von Formularen in Ihren Webanwendungen.
|
|
18
18
|
|
|
19
|
-
##
|
|
19
|
+
## Beispiele
|
|
20
20
|
|
|
21
21
|
Hier ist ein einfaches Beispiel für die Verwendung von AvalynxForm in Ihrem Projekt:
|
|
22
22
|
|
|
23
23
|
* [Übersicht](https://avalynx-form.jbs-newmedia.de/examples/index.html)
|
|
24
24
|
* [Formular](https://avalynx-form.jbs-newmedia.de/examples/form.html)
|
|
25
25
|
* [Formular mit langsamer Antwort](https://avalynx-form.jbs-newmedia.de/examples/form-slow-response.html)
|
|
26
|
-
* [Formular mit AvalynxSelect](https://avalynx-form.jbs-newmedia.de/examples/form-
|
|
26
|
+
* [Formular mit AvalynxSelect](https://avalynx-form.jbs-newmedia.de/examples/form-avalynx-select.html)
|
|
27
|
+
* [Formular mit AvalynxAutocomplete](https://avalynx-form.jbs-newmedia.de/examples/form-avalynx-autocomplete.html)
|
|
27
28
|
|
|
28
29
|
## Installation
|
|
29
30
|
|
|
@@ -50,7 +51,7 @@ Ersetzen Sie `pfad/zu/avalynx-form.js` durch den tatsächlichen Pfad zur Datei i
|
|
|
50
51
|
AvalynxForm ist auch über [jsDelivr](https://www.jsdelivr.com/) verfügbar. Sie können es wie folgt in Ihr Projekt einbinden:
|
|
51
52
|
|
|
52
53
|
```html
|
|
53
|
-
<script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.6/dist/js/avalynx-form.js"></script>
|
|
54
55
|
```
|
|
55
56
|
|
|
56
57
|
Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxForm zu gewährleisten.
|
|
@@ -143,9 +144,9 @@ AvalynxForm ermöglicht die folgenden Optionen zur Anpassung:
|
|
|
143
144
|
- `onBeforeSubmit`: (function) Eine Callback-Funktion, die vor der Formularübermittlung ausgeführt wird (Standard: `null`).
|
|
144
145
|
- `onAfterSubmit`: (function) Eine Callback-Funktion, die nach der Formularübermittlung ausgeführt wird (Standard: `null`).
|
|
145
146
|
|
|
146
|
-
##
|
|
147
|
+
## Beitragen
|
|
147
148
|
|
|
148
|
-
Beiträge sind willkommen! Wenn Sie
|
|
149
|
+
Beiträge sind willkommen! Wenn Sie etwas beitragen möchten, forken Sie bitte das Repository und senden Sie einen Pull-Request mit Ihren Änderungen oder Verbesserungen. Wir suchen Beiträge in den folgenden Bereichen:
|
|
149
150
|
|
|
150
151
|
- Fehlerbehebungen
|
|
151
152
|
- Funktionserweiterungen
|
|
@@ -159,6 +160,6 @@ AvalynxForm ist quelloffene Software, die unter der [MIT-Lizenz](LICENSE) lizenz
|
|
|
159
160
|
|
|
160
161
|
## Kontakt
|
|
161
162
|
|
|
162
|
-
Wenn Sie Fragen, Funktionswünsche oder Probleme haben, eröffnen Sie bitte ein Issue in unserem [GitHub-Repository](https://github.com/avalynx/avalynx-form/issues) oder
|
|
163
|
+
Wenn Sie Fragen, Funktionswünsche oder Probleme haben, eröffnen Sie bitte ein Issue in unserem [GitHub-Repository](https://github.com/avalynx/avalynx-form/issues) oder reichen Sie einen Pull-Request ein.
|
|
163
164
|
|
|
164
165
|
Vielen Dank, dass Sie AvalynxForm für Ihr Projekt in Betracht ziehen!
|
package/README.md
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
# AvalynxForm
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/avalynx-form)
|
|
4
|
+
[](https://www.npmjs.com/package/avalynx-form)
|
|
5
|
+
[](https://packagist.org/packages/avalynx/avalynx-form)
|
|
6
|
+
[](https://packagist.org/packages/avalynx/avalynx-form)
|
|
7
|
+
[](https://www.jsdelivr.com/package/npm/avalynx-form)
|
|
8
|
+
[](LICENSE)
|
|
9
|
+
[](https://github.com/avalynx/avalynx-form/actions/workflows/tests.yml)
|
|
10
|
+
[](https://codecov.io/gh/avalynx/avalynx-form)
|
|
11
|
+
[](https://github.com/avalynx/avalynx-form)
|
|
10
12
|
|
|
11
13
|
AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
|
|
12
14
|
|
|
@@ -16,14 +18,15 @@ AvalynxForm is a lightweight, customizable form handling library for web applica
|
|
|
16
18
|
- **Bootstrap Integration**: Designed for seamless integration with Bootstrap >= 5.3.
|
|
17
19
|
- **Easy to Use**: Simple API for creating and managing forms within your web applications.
|
|
18
20
|
|
|
19
|
-
##
|
|
21
|
+
## Examples
|
|
20
22
|
|
|
21
23
|
Here's a simple example of how to use AvalynxForm in your project:
|
|
22
24
|
|
|
23
25
|
* [Overview](https://avalynx-form.jbs-newmedia.de/examples/index.html)
|
|
24
26
|
* [Form](https://avalynx-form.jbs-newmedia.de/examples/form.html)
|
|
25
27
|
* [Form with slow response](https://avalynx-form.jbs-newmedia.de/examples/form-slow-response.html)
|
|
26
|
-
* [Form with AvalynxSelect](https://avalynx-form.jbs-newmedia.de/examples/form-
|
|
28
|
+
* [Form with AvalynxSelect](https://avalynx-form.jbs-newmedia.de/examples/form-avalynx-select.html)
|
|
29
|
+
* [Form with AvalynxAutocomplete](https://avalynx-form.jbs-newmedia.de/examples/form-avalynx-autocomplete.html)
|
|
27
30
|
|
|
28
31
|
## Installation
|
|
29
32
|
|
|
@@ -50,7 +53,7 @@ Replace `path/to/avalynx-form.js` with the actual path to the file in your proje
|
|
|
50
53
|
AvalynxForm is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
|
|
51
54
|
|
|
52
55
|
```html
|
|
53
|
-
<script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.
|
|
56
|
+
<script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.6/dist/js/avalynx-form.js"></script>
|
|
54
57
|
```
|
|
55
58
|
|
|
56
59
|
Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
|
|
5
5
|
*
|
|
6
|
-
* @version 1.0.
|
|
6
|
+
* @version 1.0.6
|
|
7
7
|
* @license MIT
|
|
8
8
|
* @author https://github.com/avalynx/avalynx-form/graphs/contributors
|
|
9
9
|
* @website https://github.com/avalynx/
|
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
*
|
|
13
13
|
* @param {string} id - The ID of the element to attach the form to.
|
|
14
14
|
* @param {object} options - An object containing the following keys:
|
|
15
|
-
* @param {object} options.apiParams - Additional parameters to be sent with the form data (default:
|
|
16
|
-
* @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the
|
|
17
|
-
* @param {function} options.onSuccess - A callback function to be executed when the form submission is successful (default:
|
|
18
|
-
* @param {function} options.onError - A callback function to be executed when the form submission fails (default:
|
|
19
|
-
* @param {function} options.onBeforeSubmit - A callback function to be executed before the form submission (default:
|
|
20
|
-
* @param {function} options.onAfterSubmit - A callback function to be executed after the form submission (default:
|
|
15
|
+
* @param {object} options.apiParams - Additional parameters to be sent with the form data (default: {}).
|
|
16
|
+
* @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the form (default: null).
|
|
17
|
+
* @param {function} options.onSuccess - A callback function to be executed when the form submission is successful (default: null).
|
|
18
|
+
* @param {function} options.onError - A callback function to be executed when the form submission fails (default: null).
|
|
19
|
+
* @param {function} options.onBeforeSubmit - A callback function to be executed before the form submission (default: null).
|
|
20
|
+
* @param {function} options.onAfterSubmit - A callback function to be executed after the form submission (default: null).
|
|
21
21
|
*
|
|
22
22
|
*/
|
|
23
23
|
|
|
@@ -141,12 +141,17 @@ export class AvalynxForm {
|
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
showInvalidFeedback(key, value) {
|
|
144
|
-
const
|
|
144
|
+
const escapedKey = CSS.escape(key);
|
|
145
|
+
const elements = document.querySelectorAll(`#${escapedKey}, [name="${escapedKey}"], [name="${escapedKey}[]"], [name^="${escapedKey}\\["]`);
|
|
145
146
|
elements.forEach(element => {
|
|
146
147
|
const parentElement = element.closest('.form-group') || element.parentElement;
|
|
147
148
|
if (parentElement !== null) {
|
|
148
149
|
const spanElement = parentElement.querySelector('.invalid-feedback');
|
|
149
150
|
element.classList.add('is-invalid');
|
|
151
|
+
const inputContainer = element.closest('[class*="-input-container"]');
|
|
152
|
+
if (inputContainer) {
|
|
153
|
+
inputContainer.classList.add('is-invalid');
|
|
154
|
+
}
|
|
150
155
|
if (spanElement !== null) {
|
|
151
156
|
spanElement.innerHTML = value;
|
|
152
157
|
spanElement.style.display = 'block';
|
|
@@ -156,12 +161,17 @@ export class AvalynxForm {
|
|
|
156
161
|
}
|
|
157
162
|
|
|
158
163
|
clearInvalidFeedback(key) {
|
|
159
|
-
const
|
|
164
|
+
const escapedKey = CSS.escape(key);
|
|
165
|
+
const elements = document.querySelectorAll(`#${escapedKey}, [name="${escapedKey}"], [name="${escapedKey}[]"], [name^="${escapedKey}\\["]`);
|
|
160
166
|
elements.forEach(element => {
|
|
161
167
|
const parentElement = element.closest('.form-group') || element.parentElement;
|
|
162
168
|
if (parentElement !== null) {
|
|
163
169
|
const spanElement = parentElement.querySelector('.invalid-feedback');
|
|
164
170
|
element.classList.remove('is-invalid');
|
|
171
|
+
const inputContainer = element.closest('[class*="-input-container"]');
|
|
172
|
+
if (inputContainer) {
|
|
173
|
+
inputContainer.classList.remove('is-invalid');
|
|
174
|
+
}
|
|
165
175
|
if (spanElement !== null) {
|
|
166
176
|
spanElement.innerHTML = " ";
|
|
167
177
|
spanElement.style.display = 'none';
|
package/dist/js/avalynx-form.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
|
|
5
5
|
*
|
|
6
|
-
* @version 1.0.
|
|
6
|
+
* @version 1.0.6
|
|
7
7
|
* @license MIT
|
|
8
8
|
* @author https://github.com/avalynx/avalynx-form/graphs/contributors
|
|
9
9
|
* @website https://github.com/avalynx/
|
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
*
|
|
13
13
|
* @param {string} id - The ID of the element to attach the form to.
|
|
14
14
|
* @param {object} options - An object containing the following keys:
|
|
15
|
-
* @param {object} options.apiParams - Additional parameters to be sent with the form data (default:
|
|
16
|
-
* @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the
|
|
17
|
-
* @param {function} options.onSuccess - A callback function to be executed when the form submission is successful (default:
|
|
18
|
-
* @param {function} options.onError - A callback function to be executed when the form submission fails (default:
|
|
19
|
-
* @param {function} options.onBeforeSubmit - A callback function to be executed before the form submission (default:
|
|
20
|
-
* @param {function} options.onAfterSubmit - A callback function to be executed after the form submission (default:
|
|
15
|
+
* @param {object} options.apiParams - Additional parameters to be sent with the form data (default: {}).
|
|
16
|
+
* @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the form (default: null).
|
|
17
|
+
* @param {function} options.onSuccess - A callback function to be executed when the form submission is successful (default: null).
|
|
18
|
+
* @param {function} options.onError - A callback function to be executed when the form submission fails (default: null).
|
|
19
|
+
* @param {function} options.onBeforeSubmit - A callback function to be executed before the form submission (default: null).
|
|
20
|
+
* @param {function} options.onAfterSubmit - A callback function to be executed after the form submission (default: null).
|
|
21
21
|
*
|
|
22
22
|
*/
|
|
23
23
|
|
|
@@ -139,12 +139,17 @@ class AvalynxForm {
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
showInvalidFeedback(key, value) {
|
|
142
|
-
const
|
|
142
|
+
const escapedKey = CSS.escape(key);
|
|
143
|
+
const elements = document.querySelectorAll(`#${escapedKey}, [name="${escapedKey}"], [name="${escapedKey}[]"], [name^="${escapedKey}\\["]`);
|
|
143
144
|
elements.forEach(element => {
|
|
144
145
|
const parentElement = element.closest('.form-group') || element.parentElement;
|
|
145
146
|
if (parentElement !== null) {
|
|
146
147
|
const spanElement = parentElement.querySelector('.invalid-feedback');
|
|
147
148
|
element.classList.add('is-invalid');
|
|
149
|
+
const inputContainer = element.closest('[class*="-input-container"]');
|
|
150
|
+
if (inputContainer) {
|
|
151
|
+
inputContainer.classList.add('is-invalid');
|
|
152
|
+
}
|
|
148
153
|
if (spanElement !== null) {
|
|
149
154
|
spanElement.innerHTML = value;
|
|
150
155
|
spanElement.style.display = 'block';
|
|
@@ -154,12 +159,17 @@ class AvalynxForm {
|
|
|
154
159
|
}
|
|
155
160
|
|
|
156
161
|
clearInvalidFeedback(key) {
|
|
157
|
-
const
|
|
162
|
+
const escapedKey = CSS.escape(key);
|
|
163
|
+
const elements = document.querySelectorAll(`#${escapedKey}, [name="${escapedKey}"], [name="${escapedKey}[]"], [name^="${escapedKey}\\["]`);
|
|
158
164
|
elements.forEach(element => {
|
|
159
165
|
const parentElement = element.closest('.form-group') || element.parentElement;
|
|
160
166
|
if (parentElement !== null) {
|
|
161
167
|
const spanElement = parentElement.querySelector('.invalid-feedback');
|
|
162
168
|
element.classList.remove('is-invalid');
|
|
169
|
+
const inputContainer = element.closest('[class*="-input-container"]');
|
|
170
|
+
if (inputContainer) {
|
|
171
|
+
inputContainer.classList.remove('is-invalid');
|
|
172
|
+
}
|
|
163
173
|
if (spanElement !== null) {
|
|
164
174
|
spanElement.innerHTML = " ";
|
|
165
175
|
spanElement.style.display = 'none';
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "avalynx-form",
|
|
3
3
|
"title": "AvalynxForm",
|
|
4
4
|
"description": "AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.",
|
|
5
|
-
"version": "1.0.
|
|
5
|
+
"version": "1.0.6",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/js/avalynx-form.js",
|
|
8
8
|
"module": "dist/js/avalynx-form.esm.js",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"package.json"
|
|
24
24
|
],
|
|
25
25
|
"author": {
|
|
26
|
-
"name": "Juergen Schwind an the
|
|
26
|
+
"name": "Juergen Schwind an the AvalynxForm Authors",
|
|
27
27
|
"url": "https://github.com/avalynx/avalynx-form/graphs/contributors"
|
|
28
28
|
},
|
|
29
29
|
"homepage": "https://github.com/avalynx/",
|