{"id":20484060,"url":"https://github.com/nuxy/webform-toolkit","last_synced_at":"2025-07-26T21:10:20.999Z","repository":{"id":3403414,"uuid":"4453336","full_name":"nuxy/webform-toolkit","owner":"nuxy","description":":radio_button: Create a HTML form with field validation and custom errors.","archived":false,"fork":false,"pushed_at":"2024-04-23T18:35:02.000Z","size":1420,"stargazers_count":15,"open_issues_count":0,"forks_count":4,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-23T20:26:00.945Z","etag":null,"topics":["form-validation","html-forms","javascript","modules","plugins","webform-generator"],"latest_commit_sha":null,"homepage":"https://webform-toolkit.nuxy.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nuxy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2012-05-26T07:17:33.000Z","updated_at":"2024-06-07T18:03:30.723Z","dependencies_parsed_at":"2024-03-30T00:27:20.776Z","dependency_job_id":"5c26ca59-81bd-4c80-a0a1-0c8bac822763","html_url":"https://github.com/nuxy/webform-toolkit","commit_stats":{"total_commits":223,"total_committers":1,"mean_commits":223.0,"dds":0.0,"last_synced_commit":"28f286b7cace16c93feb28d3328703f247a3795c"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Fwebform-toolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Fwebform-toolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Fwebform-toolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Fwebform-toolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxy","download_url":"https://codeload.github.com/nuxy/webform-toolkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224808543,"owners_count":17373467,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form-validation","html-forms","javascript","modules","plugins","webform-generator"],"created_at":"2024-11-15T16:19:44.293Z","updated_at":"2024-11-15T16:19:44.944Z","avatar_url":"https://github.com/nuxy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webform Toolkit\n\n[![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)\n\nCreate a HTML form with field validation and custom errors.\n\n![Preview](https://raw.githubusercontent.com/nuxy/webform-toolkit/master/package.gif)\n\n## Features\n\n- Extensible HTML/CSS interface.\n- Compatible with all modern desktop and mobile web browsers.\n- Easy to set-up and customize. **No dependencies**.\n- Provides form input validation using REGEX ([regular expressions](http://www.regular-expressions.info/reference.html))\n- Supports synchronous form-data POST\n- Supports FORM submit callback for custom AJAX handling.\n- Supports dynamic ([on the fly](#adding-fields)) field creation.\n\nCheckout the [demo](https://nuxy.github.io/webform-toolkit) for examples of use.\n\n## Dependencies\n\n- [Node.js](https://nodejs.org)\n\n## Installation\n\nInstall the package into your project using [NPM](https://npmjs.com), or download the [sources](https://github.com/nuxy/webform-toolkit/archive/master.zip).\n\n    $ npm install webform-toolkit\n\n## Usage\n\nThere 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.\n\n### Script include\n\nAfter you [build the distribution sources](#cli-options) the set-up is fairly simple..\n\n```html\n\u003cscript type=\"text/javascript\" src=\"path/to/webform-toolkit.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/webform-toolkit.min.css\" media=\"all\" /\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  webformToolkit(container, settings, callback);\n\u003c/script\u003e\n```\n\n### Module import\n\nIf your using a modern framework like [Aurelia](https://aurelia.io), [Angular](https://angular.io), [React](https://reactjs.org), or [Vue](https://vuejs.org)\n\n```javascript\nimport WebFormToolkit from 'webform-toolkit';\nimport 'webform-toolkit/dist/webform-toolkit.css';\n\nconst webformToolkit = new WebformToolkit(container, settings, callback);\n```\n\n### HTML markup\n\n```html\n\u003cdiv id=\"webform-toolkit\"\u003e\u003c/div\u003e\n```\n\n### Example\n\n```javascript\nconst settings = {\n  action: 'https://www.domain.com/handler',\n  params: 'name1=value1\u0026name2=value2',\n  submit: false, // Override submit button creation.\n  groups: [\n    {\n      legend: 'Login Form',\n      fields: [\n        {\n          id:          'username',\n          label:       'User Name',\n          type:        'text',\n          name:        'username',\n          value:       null,\n          maxlength:   15,\n          filter:      '^\\\\w{0,15}$',\n          description: null,\n          placeholder: null,\n          error:       'Supported characters: A-Z, 0-9 and underscore',\n          required:    true\n        },\n        {\n          id:          'password',\n          label:       'Password',\n          type:        'password',\n          name:        'password',\n          value:       null,\n          maxlength:   15,\n          filter:      '^(?!password)(.{0,15})$',\n          description: null,\n          placeholder: null,\n          error:       'The password entered is not valid',\n          required:    true\n        }\n      ]\n    }\n  ]\n};\n\nconst container = document.getElementById('webform-toolkit');\n\nconst webformToolkit = new WebformToolkit(container, settings, callback);\n```\n\n## Supported types\n\n[checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox), [color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color), [date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date), [email](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email), [file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file), [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden), [number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number), [password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password), [quantity](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/quantity), [radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio), [range](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range), [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), [submit](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit), [text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text), [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea), [time](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time)\n\n## Field definitions\n\n| Attribute   | Description                                             | Required |\n|-------------|---------------------------------------------------------|----------|\n| id          | Field ID value.                                         | true     |\n| label       | Field label value.                                      | true     |\n| type        | [Supported types](#supported-types)                     | true     |\n| name        | Form element name.                                      | true     |\n| value       | Default value.                                          | false    |\n| maxlength   | Input maximum length ([password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password), [text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text)) | false |\n| max         | Input number max ([number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number), [quantity](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/quantity)) | false |\n| min         | Input number min ([number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number), [quantity](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/quantity)) | false |\n| step        | Input number step ([range](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)) | false |\n| filter      | Validate form input using REGEX                         | false    |\n| description | Custom field description ([Supported text tokens](#supported-text-tokens)). | false |\n| placeholder | Input field type placeholder text.                      | false    |\n| error       | Custom error message (Required, if `filter` is defined) | false    |\n| required    | Required field.                                         | false    |\n\n## Supported text tokens\n\nThe following Markdown elements are supported in the `description` attribute:\n\n| Token Type   | Example                  |\n|--------------|--------------------------|\n| Bold         | \u0026ast;\u0026ast;bold\u0026ast;\u0026ast; |\n| Italic       | \u0026ast;italic\u0026ast;         |\n| Link         | \u0026lsqb;alt text\u0026rsqb;\u0026lpar;https://www.example.com\u0026rpar; |\n\n## Callback processing\n\nWhen 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.\n\n```javasctipt\nfunction callback(form) {\n  const xhr = new XMLHttpRequest();\n\n  xhr.addEventListener('load', function() {\n    if (this.status == 200) {\n      alert(response);\n    }\n  });\n\n  xhr.open('POST', form.getAttribute('action'));\n  xhr.send(new FormData(form));\n}\n```\n\n## Adding fields\n\nI 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.\n\n```javascript\nwebformToolkit.create({\n  id:          'new_field_id',\n  label:       'New Field',\n  type:        'text',\n  name:        'new_field',\n  value:       null,\n  maxlength:   null,\n  filter:      '^[a-zA-Z0-9_]{0,255}$',\n  description: 'This is my new field',\n  placeholder: null,\n  error:       'Supported characters: A-Z, 0-9 and underscore',\n  required:    true\n},\nfunction(form, elm) {\n  form.appendChild(elm); // default: last in fieldset\n});\n```\n\n## Best practices\n\nJust 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.\n\n## Developers\n\n### CLI options\n\nRun [ESLint](https://eslint.org) on project sources:\n\n    $ npm run lint\n\nTranspile ES6 sources (using [Babel](https://babeljs.io)) and minify to a distribution:\n\n    $ npm run build\n\nRun [WebdriverIO](https://webdriver.io) E2E tests:\n\n    $ npm run test\n\n## Contributions\n\nIf 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))\n\n## Versioning\n\nThis package is maintained under the [Semantic Versioning](https://semver.org) guidelines.\n\n## License and Warranty\n\nThis 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.\n\n_webform-toolkit_ is provided under the terms of the [MIT license](http://www.opensource.org/licenses/mit-license.php)\n\n## Author\n\n[Marc S. Brooks](https://github.com/nuxy)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxy%2Fwebform-toolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxy%2Fwebform-toolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxy%2Fwebform-toolkit/lists"}