Skip to content

Latest commit

 

History

History
139 lines (112 loc) · 5.99 KB

README.md

File metadata and controls

139 lines (112 loc) · 5.99 KB
Raw

jquery.jsForm

jQuery based form library that allows you to handle data within a javascript object (like from a JSON request) with plain html forms.

This is a library allowing a binding between html and a javascript object as described in MVVM similar to other libraries like knockout.js or AngularJs. JsForm only takes care of the rendering of data in a html. The controller can be written in standard jQuery. This keeps the library clean and simple.

The main features of this library are:

  • Use html markup to fill your forms/page with almost any js object dynamically
  • Update an existing js object with changes done within a form (=manipulate data without extra code)
  • Provide basic functions for formatting (i.e. date/time, money, byte) using html markup
  • Provide form validation functionality
  • handle collections (arrays) with subobjects
  • handle binaries (blobs) within json by converting them to data url
  • provides helper methods to handle array manipulation (add new entry/remove an entry) using only html markup
  • Can be used in connection with an autocomplete function to add new array objects
  • Compatible with jQuery UI and jQuery Mobile
  • addon library for form controls and layouting (comes bundled in the minified version), internationalisation
  • unit tested using QUnit
  • jslint clean
  • Minified+Gzipped: 7kb

You can also check out some Demos.

Libraries

Required

Optional

Download

Current Version: 1.3.3

On bower.io:

bower install jquery-jsform --save

Documentation

can be found in the github wiki:

Custom UI Controls

Additionally to the base form, I created some custom controls. There might be much more powerful versions out there, but the aim here is to have simple to use controls that are compatible with the json-approach of jsForm and also compatible to jquery-ui.

Quickstart

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://raw.github.com/corinis/jsForm/master/src/jquery.jsForm.js"></script>
<script>
$(function(){
	// some json data
	var jsonData = {
		name: "TestName",	// standard inputs
		description: "long Description\nMultiline",	// textarea
		links: [{href:'http://www.gargan.org',description:'Gargan.org'},{href:'http://www.github.com',description:'GitHub'}],	// lists
		active: true,	// checkbox
		type: "COOL", // radio (enums)
		state: "VISIBLE",	// selects (enums)
	};

	// initialize the form, prefix is optional and defaults to data
	$("#details").jsForm({
		data:jsonData
	});

	$("#show").click(function() {
		// show the json data
		alert(JSON.stringify($("#details").jsForm("get"), null, " "));
	});
});
</script>
</head>
<body>
<h1>Simpel Form Test</h1>
<div id="details">
	Name: <input name="data.name"/><br/>
	<input type="checkbox" name="data.active"/> active<br/>
	<textarea name="data.description"></textarea><br/>
	<select name="data.state">
		<option value="VISIBLE">visible</option>
		<option value="IMPORTANT">important</option>
		<option value="HIDDEN">hidden</option>		
	</select>
	<br/>
	<input type="radio" name="data.type" value="COOL"/> Cool<br/>
	<input type="radio" name="data.type" value="HOT"/> Hot<br/>
	<input type="radio" name="data.type" value="WARM"/> Warm<br/>
	<fieldset>
		<legend>Links</legend>
		<ul class="collection" data-field="data.links">
			<li><span class="field">links.description</span> Link: <input name="links.href"/> <button class="delete">x</button></li>
		</ul>
	</fieldset>
	<button class="add" data-field="data.links">add a link</button><br/>
	Additional field: <input name="data.addedField"/>
</div>
<button id="show">Show Object</button>
</body>
</html>

Also check out the other samples:

view life demos