Question

How do I create my HTML form based on rules I have in JSON ?

So I need to create a form like

My rules are in JSON as follows;

{
   "modules":[
      {
         "type":"navigation",
         "container":"#header",
         "title":"Top Navigation",
         "attributes":{
            "class":"topNavigation",
            "id":"topNavigation"
         }
      },
      {
         "type":"content",
         "title":"Hi Welcome to mobile development",
         "subtitle":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
         "container":"#maincontent",
         "attributes":{
            "class":"topContent"
         }
      },
      {
         "type":"form",
         "title":"Registration Form",
         "action":"submit.aspx",
         "name":"registrationform",
         "container":"#maincontent",
         "attributes":{
            "class":"registrationform"
         },
         "fields":[
            {
               "id":"firstname",
               "label":"First Name",
               "name":"fname",
               "type":"text",
               "value":""
            },
            {
               "id":"email",
               "label":"Email",
               "name":"email",
               "type":"text",
               "value":""
            },
            {
               "id":"countries",
               "label":"Country",
               "name":"countries",
               "type":"select",
               "options":[
                  {
                     "value":"",
                     "text":"Select Country"
                  },
                  {
                     "value":"in",
                     "text":"India",
                      "selected":"true"
                  },
                  {
                     "value":"us",
                     "text":"United Stated"

                  },
                  {
                     "value":"uk",
                     "text":"United Kingdom"
                  },
                  {
                     "value":"cn",
                     "text":"Canada"
                  }
               ]
            },
            {
               "id":"submit",
               "name":"submit",
               "type":"submit",
               "value":"Submit"
            }
         ],
         "rules":
            {
                "fname" : "required", 
                "email"     :   {
                                    "required": "true",
                                    "email": "true"
                                }
            },
         "messages":
            {
                "fname" : "Enter your firstname",
                "email" :   {
                                "required": "Please enter a valid email address",
                                "minlength": "Please enter a valid email address"
                            }
            }
      }
   ]
}

While I have used normal HTML/JS code to create such forms, I am not sure how to parse things/rules from JSON and then apply it to the HTML ?

I need to create the DOM for the HTML using JS as well…

Please provide me any similar references which I can have a look at.

Answer 1

You can try something like this: http://jsfiddle.net/epk6Z/

for fiddle i used a variable json

$.each(json.modules, function (i, items) {
  $('<' + items.formElem + '/>').attr({
    "action": items.action,
        "name": items.name,
        "class": items.attributes.class
  }).appendTo('body');
  $('<h1/>').text(items.title).appendTo('.registrationform');
});

And in the ajax, this should be in the success function like this:

success: function(data){
 $.each(data.modules, function (i, items) {
  $('<' + items.formElem + '/>').attr({
    "action": items.action,
        "name": items.name,
        "class": items.attributes.class
  }).appendTo('body');
  $('<h1/>').text(items.title).appendTo('.registrationform');
 });
} 

there are lot of other changes has to be made but this is just a shotest usage i did.

json

{
"modules": [{
    "nav": "navigation",
        "container": "#header",
        "title": "Top Navigation",
        "attributes": {
        "class": "topNavigation",
            "id": "topNavigation"
    }
}, {
    "page-content": "content",
        "title": "Hi Welcome to mobile development",
        "subtitle": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "container": "#maincontent",
        "attributes": {
        "class": "topContent"
    }
}, {
    "formElem": "form", //<-----------i targeted this
        "title": "Registration Form",
        "action": "submit.aspx",
        "name": "registrationform",
        "container": "#maincontent",
        "attributes": {
        "class": "registrationform"
    }
    ...............

note:

Its not a full answer i just appended the form and the title of the form