Webform Toolkit

Dynamically generate an HTML form with field validation and custom errors using a simple JSON

Features

Extensible HTML/CSS interface.
Compatible with Firefox 3.6+, Chrome, Safari 5+, Opera, and Internet Explorer 7+ web browsers.
Compatible with iOS and Android mobile web browsers.
Easy to set-up and customize.
Provides form input validation using REGEX (regular expressions)
Supports synchronous form-data POST
Supports FORM submit callback for custom AJAX handling.
Supports dynamic (on the fly) field creation.
Fast and lightweight (jQuery plug-in *only 7 kB)

Check out the demo provided with this package.

Installation

Download the latest sources to your computer using a web browser.
Extract the contents of the .zip into a folder on your local computer.
Upload the folder with the following files to your web site.

Filename	Role
jquery.webform.toolkit.min.js	The main script to be included from within your HTML document.
jquery.webform.toolkit.min.css	This style sheet that defines the "look & feel" of the HTML form.

Set-up

It's as simple as defining the target element #container using the jQuery selector and passing form field properties as JSON. An optional callback can also be defined for post-processing data on submit event.

$(selector).WebformTookit(config, callback);

Source Code

Add the following JavaScript/CSS between the <head></head> tags of your HTML document.

Use Example 1 - General Webform

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="/path/to/jquery.webform.toolkit.min.js"></script>
<script>
$(document).ready(function() {
	var webform = $('#container')
		.WebformToolkit({
			id     : 'example',
			action : 'http://www.domain.com/handler',
			fields : [
				{
					"label"       : "User Name",
					"type"        : "text",
					"name"        : "username",
					"value"       : "",
					"maxlength"   : "15",
					"filter"      : "^\\w{0,15}$",
					"description" : "",
					"error"       : "Supported characters: A-Z, 0-9 and underscore",
					"required"    : "1"
				},
				{
					"label"       : "Password",
					"type"        : "text",
					"name"        : "password",
					"value"       : "",
					"maxlength"   : "15",
					"filter"      : "^(?!password)(.{8,15})$",
					"description" : "Must be a minimum of 8 characters",
					"error"       : "The password entered is not valid",
					"required"    : "1"
				}
			]
		}, customHandler);
</script>

<link rel="stylesheet" type="text/css" href="/path/to/jquery.webform.toolkit.min.css">

Use Example 2 - Webform using field groups

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="/path/to/jquery.webform.toolkit.min.js"></script>
<script>
$(document).ready(function() {
	var webform = $('#container')
		.WebformToolkit({
			id     : 'example',
			action : 'http://www.domain.com/handler',
			fields : [
				[
					{
						"label"       : "User Name",
						"type"        : "text",
						"name"        : "username",
						"value"       : "",
						"maxlength"   : "15",
						"filter"      : "^\\w{0,15}$",
						"description" : "",
						"error"       : "Supported characters: A-Z, 0-9 and underscore",
						"required"    : "1"
					},
					{
						"label"       : "Password",
						"type"        : "text",
						"name"        : "password",
						"value"       : "",
						"maxlength"   : "15",
						"filter"      : "^(?!password)(.{8,15})$",
						"description" : "Must be a minimum of 8 characters",
						"error"       : "The password entered is not valid",
						"required"    : "1"
					}
				],
				[
					{
						"label"       : "Pin Code",
						"type"        : "text",
						"name"        : "password",
						"value"       : "",
						"maxlength"   : "8",
						"filter"      : "^\\d{8,15}$",
						"description" : "Must be a minimum of 8 numeric characters",
						"error"       : "The pin code entered is not valid",
						"required"    : "1"
					}
				]
			]
		}, customHandler);
</script>

<link rel="stylesheet" type="text/css" href="/path/to/jquery.webform.toolkit.min.css">

Field Definitions

Attribute	Description	Required
label	Field label value	true
type	Supported types: text\|hidden\|password\|checkbox\|radio\|file\|select\|textarea	true
name	Form element name	true
value	Default value	true
~~size~~	~~Input type maximum length~~ (see below)	~~false~~
maxlength	Input type maximum length	false
filter	Validate form input using REGEX	false
description	Custom field description	false
error	Custom error message	false
required	Required field	false

The size field definition has been deprecated to be replaced with maxlength going forward. Please adapt your code when using this release. For backwards compatibility, I have left support in-tact, but do not expect to be available in future releases. You have been warned.

Callback Processing

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 provided above.

function customHandler(form) {
	$.ajax({
		type : 'POST',
		url  : form.attr('action'),
		data : form.serialize()
	})
	.success(function(response) {
		alert(response);
	});
}

Adding Fields on the fly

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.

webform.WebformToolkit('create', {
	"label"       : "New Field",
	"type"        : "text",
	"name"        : "new_field",
	"value"       : "",
	"size"        : "",
	"filter"      : "^[a-zA-Z0-9]{0,255}$",
	"description" : "",
	"error"       : "Supported characters: A-Z, 0-9",
	"required"    : "0"
},
function(form, elm) {
	form.append(elm);  // default: last in fieldset
});

Best Practices

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.

jQuery Support

In order to support older web browsers, specifically Internet Explorer 7, this package requires jQuery 1.8.3. Furthermore, jQuery has recently dropped support for IE8 in version 2, so if there is no compelling reason to support these two web browsers it is recommended that you upgrade to the latest version of jQuery. If you still need to support IE8 please upgrade to jQuery 1.9+.

Functional Testing

This package has been preconfigured to support QUnit headless testing using Travis-CI. If you plan on using another integration tool you will have to create a custom project that combines the use of QUnit and PhantomJS plugins. You can manually run these tests in your web browser by clicking here.

Releases

I have included with this package a packed version (4.8 kB) and developers version (unpacked 10 kB)

You can always find the latest updates within this projects repository.

Code Repository

This projects repository is currently hosted on Github

https://github.com/nuxy/Webform-Toolkit

Maintainer

For feedback, bug reports, or other comments, feel free to contact me at: devel at mbrooks dot info

License and Warranty

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.

Webform Toolkit is provided under the terms of the MIT license.