Daffs blog Still keeping it simple

Sim·plic·i·ty

freedom from complexity, intricacy, or division into parts

Creating forms in JSON with jQuery

Creating and managing HTML forms is probably one of the most tedious and in many web applications also the most important part of the frontend development process. Forms generated in a web application usually need to contain information on how they bind to domain objects, errors that occurred during processing and the values of different fields. Because maintaining all these information manually is very error prone and requires writing a lot of repetitive markup there are different approaches that support developers in this task:

  • Declarative: The framework supports custom tags that create form elements with all the information it needs to process that form (e.g. the JSTL Spring Form taglib)
  • Helper: In a view script the framework offers helper functions you can call which return a new form element (e.g. Ruby on Rails)
  • Programmatic: Forms are created programatically in the frameworks programming language (e.g. GWT, the Sencha ExtJS Forms or Zend Form)
  • GUI based: The form is created in a graphical user interface via Drag and Drop (e.g. the just started jQuery Form Builder project or ASP.NET web forms)

With web applications becoming more JavaScript heavy these approaches now not only have to generate HTML, but also have to take care of creating the appropriate JavaScript source code which often leads to an ugly mix of HTML, client side logic and server side logic.

One solution for that problem is the separation of HTML markup generation from the actual form definition, where the definition is available in a more abstract but easy to process format (like JSON). If a web application is already relying on JavaScript, the next step is then to let the client itself create the form from that definition.

Inspired by the programmatic approach and the fact that there doesn’t seem to be any jQuery plugin for this I started the jQuery dForm plugin (currently version 0.1.3). The ideas behind it:

  • Use JSON (or XML) as the form definition format. Easy to generate (e.g. automatically from your domain model) and flexible enough so that it can still be used to generate forms on the server side.
  • Easily extensible: Possibility to support other plugins, your own jQuery powered form elements or improving existing ones
  • Don’t reinvent the wheel: Add support for existing plugins like jQuery UI, the Validation Plugin or the jQuery Form plugin and keep the plugin itself as compact as possible.

The basic example to use the plugin looks like this:

<script type="text/javascript">
var formdata = {
    "action" : "index.html",
    "method" : "get",
    "elements" :
    [
        {
            "type" : "p",
            "html" : "You must login"
        },
        {
            "name" : "username",
            "id" : "txt-username",
            "caption" : "Username",
            "type" : "text",
            "placeholder" : "E.g. user@example.com"
        },
        {
            "name" : "password",
            "caption" : "Password",
            "type" : "password"
        },
        {
            "type" : "submit",
            "value" : "Login"
        }
    ]
};
 
$("#myform").buildForm(formdata);
 
// Or if the content of formdata can be loaded from a URL
// $("#myform").buildForm("http://example.com/myform.json");
</script>
 
<form id="myform"></form>

The advantage is, that the form definition and the configuration of JavaScript functionality can be kept in the same format. Check out the examples page for more complex forms and some jQuery UI and the extension chapter to see how to customize and extend your forms.

Worth mentioning: Since JSON (or XML for that matter) are quite abstract formats and the form generation itself is done by the client, an extension for generating browser specific HTML5 forms is currently under development.

If you have questions or want to contribute (e.g. by adding dForm support to your own form related plugin :) visit the plugin homepage on GitHub.

blog comments powered by Disqus