1 | # Webform Toolkit
|
2 |
|
3 | [![npm version](https://badge.fury.io/js/webform-toolkit.svg)](https://badge.fury.io/js/webform-toolkit) [![](https://img.shields.io/npm/dm/webform-toolkit)](https://www.npmjs.com/package/webform-toolkit) [![Build Status](https://img.shields.io/github/actions/workflow/status/nuxy/webform-toolkit/.github%2Fworkflows%2Fci.yml)](https://github.com/nuxy/webform-toolkit/actions) [![Install size](https://packagephobia.com/badge?p=webform-toolkit)](https://packagephobia.com/result?p=webform-toolkit) [![](https://img.shields.io/github/v/release/nuxy/webform-toolkit)](https://github.com/nuxy/webform-toolkit/releases)
|
4 |
|
5 | Create a HTML form with field validation and custom errors.
|
6 |
|
7 | ![Preview](https://raw.githubusercontent.com/nuxy/webform-toolkit/master/package.gif)
|
8 |
|
9 | ## Features
|
10 |
|
11 | - Extensible HTML/CSS interface.
|
12 | - Compatible with all modern desktop and mobile web browsers.
|
13 | - Easy to set-up and customize. **No dependencies**.
|
14 | - Provides form input validation using REGEX ([regular expressions](http://www.regular-expressions.info/reference.html))
|
15 | - Supports synchronous form-data POST
|
16 | - Supports FORM submit callback for custom AJAX handling.
|
17 | - Supports dynamic ([on the fly](#adding-fields)) field creation.
|
18 |
|
19 | Checkout the [demo](https://nuxy.github.io/webform-toolkit) for examples of use.
|
20 |
|
21 | ## Dependencies
|
22 |
|
23 | - [Node.js](https://nodejs.org)
|
24 |
|
25 | ## Installation
|
26 |
|
27 | Install the package into your project using [NPM](https://npmjs.com), or download the [sources](https://github.com/nuxy/webform-toolkit/archive/master.zip).
|
28 |
|
29 | $ npm install webform-toolkit
|
30 |
|
31 | ## Usage
|
32 |
|
33 | There are two ways you can use this package. One is by including the JavaScript/CSS sources directly. The other is by importing the module into your component.
|
34 |
|
35 | ### Script include
|
36 |
|
37 | After you [build the distribution sources](#cli-options) the set-up is fairly simple..
|
38 |
|
39 | ```html
|
40 | <script type="text/javascript" src="path/to/webform-toolkit.min.js"></script>
|
41 | <link rel="stylesheet" href="path/to/webform-toolkit.min.css" media="all" />
|
42 |
|
43 | <script type="text/javascript">
|
44 | webformToolkit(container, settings, callback);
|
45 | </script>
|
46 | ```
|
47 |
|
48 | ### Module import
|
49 |
|
50 | If your using a modern framework like [Aurelia](https://aurelia.io), [Angular](https://angular.io), [React](https://reactjs.org), or [Vue](https://vuejs.org)
|
51 |
|
52 | ```javascript
|
53 | import WebFormToolkit from 'webform-toolkit';
|
54 | import 'webform-toolkit/dist/webform-toolkit.css';
|
55 |
|
56 | const webformToolkit = new WebformToolkit(container, settings, callback);
|
57 | ```
|
58 |
|
59 | ### HTML markup
|
60 |
|
61 | ```html
|
62 | <div id="webform-toolkit"></div>
|
63 | ```
|
64 |
|
65 | ### Example
|
66 |
|
67 | ```javascript
|
68 | const settings = {
|
69 | action: 'https://www.domain.com/handler',
|
70 | params: 'name1=value1&name2=value2',
|
71 | groups: [
|
72 | {
|
73 | legend: 'Login Form',
|
74 | fields: [
|
75 | {
|
76 | id: 'username',
|
77 | label: 'User Name',
|
78 | type: 'text',
|
79 | name: 'username',
|
80 | value: null,
|
81 | maxlength: 15,
|
82 | filter: '^\\w{0,15}$',
|
83 | description: null,
|
84 | placeholder: null,
|
85 | error: 'Supported characters: A-Z, 0-9 and underscore',
|
86 | required: true
|
87 | },
|
88 | {
|
89 | id: 'password',
|
90 | label: 'Password',
|
91 | type: 'password',
|
92 | name: 'password',
|
93 | value: null,
|
94 | maxlength: 15,
|
95 | filter: '^(?!password)(.{0,15})$',
|
96 | description: null,
|
97 | placeholder: null,
|
98 | error: 'The password entered is not valid',
|
99 | required: true
|
100 | }
|
101 | ]
|
102 | }
|
103 | ]
|
104 | };
|
105 |
|
106 | const container = document.getElementById('webform-toolkit');
|
107 |
|
108 | const webformToolkit = new WebformToolkit(container, settings, callback);
|
109 | ```
|
110 |
|
111 | ## Field definitions
|
112 |
|
113 | | Attribute | Description | Required |
|
114 | |-------------|---------------------------------------------------------------------------------------------------|----------|
|
115 | | id | Field ID value. | true |
|
116 | | label | Field label value. | true |
|
117 | | type | Supported types (`text`, `hidden`, `password`, `checkbox`, `radio`, `file`, `select`, `textarea`) | true |
|
118 | | name | Form element name. | true |
|
119 | | value | Default value. | false |
|
120 | | maxlength | Input type maximum length. | false |
|
121 | | filter | Validate form input using REGEX | false |
|
122 | | description | Custom field description. | false |
|
123 | | placeholder | Input field type placeholder text. | false |
|
124 | | error | Custom error message (Required, if `filter` is defined) | false |
|
125 | | required | Required field. | false |
|
126 |
|
127 | ## Callback processing
|
128 |
|
129 | When a callback function is defined a form object is returned. This allows you to define a custom AJAX handler based on the requirements of your application. The following function corresponds to the [example](#usage) provided above.
|
130 |
|
131 | ```javasctipt
|
132 | function callback(form) {
|
133 | const xhr = new XMLHttpRequest();
|
134 |
|
135 | xhr.addEventListener('load', function() {
|
136 | if (this.status == 200) {
|
137 | alert(response);
|
138 | }
|
139 | });
|
140 |
|
141 | xhr.open('POST', form.getAttribute('action'));
|
142 | xhr.send(new FormData(form));
|
143 | }
|
144 | ```
|
145 |
|
146 | ## Adding fields
|
147 |
|
148 | I have added a method to dynamically create form fields that can be added to an existing webform. An optional callback has also been provided to for post-processing FORM and field elements. This makes it easy to show/hide fields using conditions and expressions.
|
149 |
|
150 | ```javascript
|
151 | webformToolkit.create({
|
152 | id: 'new_field_id',
|
153 | label: 'New Field',
|
154 | type: 'text',
|
155 | name: 'new_field',
|
156 | value: null,
|
157 | maxlength: null,
|
158 | filter: '^[a-zA-Z0-9_]{0,255}$',
|
159 | description: 'This is my new field',
|
160 | placeholder: null,
|
161 | error: 'Supported characters: A-Z, 0-9 and underscore',
|
162 | required: true
|
163 | },
|
164 | function(form, elm) {
|
165 | form.appendChild(elm); // default: last in fieldset
|
166 | });
|
167 | ```
|
168 |
|
169 | ## Best practices
|
170 |
|
171 | Just because you are filtering form input on the client-side is NO EXCUSE to not do the same on the server-side. Security is a two-way street, and BOTH ends should be protected.
|
172 |
|
173 | ## Unsupported releases
|
174 |
|
175 | To install deprecated versions use [Bower](http://bower.io) or download the package [by tag](https://github.com/nuxy/webform-toolkit/tags).
|
176 |
|
177 | ### v2 (no dependencies)
|
178 |
|
179 | $ bower install webform-toolkit#2
|
180 |
|
181 | ### v1 (requires [jQuery 1.8.3](http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js))
|
182 |
|
183 | Compatible with Firefox 3.6, Chrome, Safari 5, Opera, and Internet Explorer 7+ web browsers.
|
184 |
|
185 | $ bower install webform-toolkit#1
|
186 |
|
187 | ## Developers
|
188 |
|
189 | ### CLI options
|
190 |
|
191 | Run [ESLint](https://eslint.org) on project sources:
|
192 |
|
193 | $ npm run lint
|
194 |
|
195 | Transpile ES6 sources (using [Babel](https://babeljs.io)) and minify to a distribution:
|
196 |
|
197 | $ npm run build
|
198 |
|
199 | Run [WebdriverIO](https://webdriver.io) E2E tests:
|
200 |
|
201 | $ npm run test
|
202 |
|
203 | ## Contributions
|
204 |
|
205 | If you fix a bug, or have a code you want to contribute, please send a pull-request with your changes. (Note: Before committing your code please ensure that you are following the [Node.js style guide](https://github.com/felixge/node-style-guide))
|
206 |
|
207 | ## Versioning
|
208 |
|
209 | This package is maintained under the [Semantic Versioning](https://semver.org) guidelines.
|
210 |
|
211 | ## License and Warranty
|
212 |
|
213 | This package is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose.
|
214 |
|
215 | _webform-toolkit_ is provided under the terms of the [MIT license](http://www.opensource.org/licenses/mit-license.php)
|
216 |
|
217 | ## Author
|
218 |
|
219 | [Marc S. Brooks](https://github.com/nuxy)
|