how to create a html form using a JSON definition?

I am looking for a javascript lib which enables me to store (html) forms in JSON format, with a bit of intelligence built into validate inputs client side. Something like:

function FormController(){
  this.user = {
    name: 'John Smith',
    address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'},
    contacts:[{type:'phone', value:'1(234) 555-1212'}]
  };
  this.state = /^\w\w$/;
  this.zip = /^\d\d\d\d\d$/;
}

(This is taken from http://docs.angularjs.org/#!cookbook.form ). It's almost what I want, as it offers basic client side validation with regular expressions and you can provide defaults but it appears to still need you to create the HTML form.

I want something that only requires the definition. Any ideas?

标签： html json validation forms dynamic

10条回答

够拽才男人

2楼-- · 2020-01-30 09:07

Check out jQuery Templates plugin.
A little while back I wrote up a little blog post on Client-side Data Binding with jQuery Templates. It seems to me that this is exactly what you're looking for.

0人赞添加讨论(0) 举报

SAY GOODBYE

3楼-- · 2020-01-30 09:15

Angular doesn't solve your problem out of the box because it asumes that you have static html which you want to bind some data to.

Having said that you can use angular to fulfill your objectives. You can create a new tag (angular widget) which will take a js object and dynamically creates the form DOM along with all the angular validation attributes. You then compile the form with angular's compiler and attach it to your page. This will result in dynamically created form with all the existing angular's validation and databinding features working just like with a static html.

There is nothing I can think of that would prevent you from doing this via angular.widget api, but it's not a trivial task.

Can you tell me more about your data structures? I wonder if having just a set of forms and using the right one at the right time wouldn't be sufficient. Why do you need the form creation to by completely dynamic and data-driven?

UPDATE: The angular solution can be found at https://groups.google.com/forum/#!topic/angular/f8KbLtT_Mqs

0人赞添加讨论(0) 举报

虎瘦雄心在

4楼-- · 2020-01-30 09:16

In shameless self promotion I would also like to mention my jQuery.dForm plugin. It's been around for a while now and support the jQuery validation plugin, jQuery UI and is easily extensible. This is how it looks:

var formdata =
{
    "action" : "index.html",
    "method" : "get",
    "elements" : 
    [
        {
            "name" : "textfield",
            "caption" : "Label for textfield",
            "type" : "text",
            "value" : "Hello world"
        },
        {
            "type" : "submit",
            "value" : "Submit"
        }
    ]           
};
$("#myform").buildForm(formdata);

// Or to load the form definition via AJAX
$("#myform").buildForm("http://example.com/myform.json");

0人赞添加讨论(0) 举报

SAY GOODBYE

5楼-- · 2020-01-30 09:16

May I humbly suggest Metawidget?

It generates HTML forms from arbitrary complex JSON objects. Simple JavaScript example:

<!DOCTYPE HTML>
<html>
   <head>
      <script src="http://metawidget.org/js/4.0/metawidget-core.min.js"></script>
      <style>
         #metawidget {
            border: 1px solid #cccccc;
            width: 250px;
            border-radius: 10px;
            padding: 10px;
            margin: 50px auto;
         }
      </style>
   </head>
   <body>
      <div id="metawidget"></div>
      <script type="text/javascript">
         var mw = new metawidget.Metawidget( document.getElementById( 'metawidget' ));
         mw.toInspect = {
            firstname: 'Homer',
            surname: 'Simpson',
            age: 36
         };
         mw.buildWidgets();
      </script>
   </body>
</html>

It also supports:

augmenting the JSON object with additional sources of metadata, such as JSON Schema or metadata from REST services
frameworks such as JQuery UI, JQuery Mobile, AngularJS
third-party component libraries and validators
pluggable layouts

0人赞添加讨论(0) 举报

放荡不羁爱自由

6楼-- · 2020-01-30 09:18

Take a look at brutusin:json-forms.

It accepts a JSON-Schema and the initial JSON data to populate the form.

0人赞添加讨论(0) 举报

成全新的幸福

7楼-- · 2020-01-30 09:21

Check out InputEx, it seems exactly what you want.

It uses JSON to define the entire form:

// Create a schemaIdentifierMap 
var schemaIdentifierMap = {
 // Person definition
 "Person": {
    "id": "Person",
    "description":"A person",
    "type":"object",
    "properties": {
        "name": { "type":"string"},
        "born" : { "type":"string", "format":"date", "optional":true},
        "gender" : { "type":"string", "choices": [ {"value":"male","label":"Guy"}, {"value":"female","label":"Girl"} ]},
        "grownup": { "type": "boolean" },
        "favoritecolors": { "type": "array" },
        "address": { 
            "type":"object",
            "properties":{
                "street":{"type":"string"},
                "city":{"type":"string"},
                "state":{"type":"string"}
            }
        }
    }
 }
};

(from http://neyric.github.com/inputex/examples/json-schema.html)

0人赞添加讨论(0) 举报

1 2 下一页

how to create a html form using a JSON definition?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间