JSON/Knockout Form Builder

Use JSON to make forms clientside.

by Sky Sigal

HTML

<div class='d'>
    <span class="h"/>
</div>
<div id="target"/>

CSS

div#target {border:solid 1px;}

div#target div {boder:solid 1px #C0C0C0;}
    
div#target div p {background:#C0C0CF; padding:0px;margin:0 0 2px 0;}

div#target div p span {width:100px;color:orange;}

div#target div p label {display:inline-block;background:#C0C0CF;
    color:red;padding:2px;width:150px;}

JavaScript

var serializedFormData = '{"title":"My Form","sections":[{"type":"none|labelled|tab","name":"grp1","fields":[{"key":"FirstName","type":"text","label":"First Name:","binding":"firstName","validations":[{"type":"required"},{"type":"minLength","min":"1"}]},{"key":"Gender","type":"options","label":"Gender:","binding":"gender","options":"genderOptions","validations":[{"type":"required"}]}]}]}';


function FormBuilder(formData, $target){
   var me = this;
   me.target = $target;
   me.init(formData);   
    alert ("DOne");
}

FormBuilder.prototype.init = function (formData){
   var me = this;
  me.containerStack = []; 
  me.container = target;    
    me.containerStack.push(me.target);
   
   $("<h1/>").text(formData.title).appendTo(me.target );

    $.each(formData.sections, function(i,g){me.createSection(i, g)});
 }

FormBuilder.prototype.createNestedContainer=function(html){
   var me = this;
    var $parent = me.containerStack[me.containerStack.length-1];
    var $container = $(html);
    $container.appendTo($parent);
    me.containerStack.push($container);
    return $container;
}

FormBuilder.prototype.createSection=function (index, data){
   var me = this;
    var $container = me.createNestedContainer("<div/>");
    //Create Header
    if (data.name){$("<h2/>").text(data.name).appendTo($container);}

    $.each(data.fields, function(i,g){me.createRow(i, g, $container)});

    this.containerStack.pop($container);
}

FormBuilder.prototype.createRow=function (index, data, $parent){
   var me = this;
    var $container = me.createNestedContainer("<p/>");
    me.createLabel(data, $container);
    me.createControl(data, $container);
    me.containerStack.pop($container);
}

FormBuilder.prototype.createLabel=function (data, $parent){
   var me = this;
   
   $("<label/>")
       .text(data.label)
       .attr('for',data.key)
       .appendTo($parent);
}

FormBuilder.prototype.createControl=function (data, $parent){
   var me = this;
    if ((data.type=='select') ||...