JarCastingjquery.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 and Bootstrap
- 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
- jQuery 1.9 or higher
Optional
Optional Libraries are used with jquery.jsForm.controls.js to allow various input methods:
- jQuery Format Plugin 1.2 or higher- used when working with date/number formats
- clockpicker used to display a clock input using input class="time"
- flatpickr date and dateTime control (class="date" or class="dateTime")
- datetimepicker alternative datetime picker (class="date" or class="dateTime")
- Moment.js allows for finer grained international date support
- jQWidgets support
Download
Current Version: 1.4.0
On bower.io:
bower install jquery-jsform --save
Documentation
can be found in the github wiki:
- Dom Layout tells you how you can/should structure your html
- API Documentation for the javascript options
- Form Controls and Validation additional formatting/validating controls
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.
- jquery.responsiveDialog.js Plugin which extends the default jquery.ui dialog to be more responsive
Quickstart
- Start with a simple html to show you the basic usage download sample view life. :
<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>