Generazione di moduli HTML da JSON o feed XML utilizzando JQuery

Question

Vorrei creare un modulo HTML basato su dati XML o JSON utilizzando Jquery e ho anche intenzione di convalidare tutti i campi modulo che potrebbero essere vuoti o non corretti.

Mi piacerebbe sapere se ci sono altri programmi/funzioni che generano dinamicamente un modulo di questo tipo al volo e il modo migliore per farlo. Qualsiasi widget o librerie jquery che funzionano meglio con esempi di lavorazione sarebbe molto apprezzato

E anche quale feed utilizzare al meglio in questo scenario XML o JSON e spiegare perché?

Grazie

Answer 1

ho trovato alcuni di questi che potrebbe aiutare a:

Generazione di forme da schema JSON:

• how to create a html form using a JSON definition?
• http://neyric.github.com/inputex/examples/json-schema.html
• JavaScript to generate/render dynamic HTML form from JSON or similar data?
• Any tool to generate html form

forme di generazione da uno schema XML:

• http://www.totallysmartit.com/examples/xml/questionnaire/
• Create HTML form from XML
• http://www.datamech.com/XMLForm/

campioni provenienti da diversi librerie per generare forma:

• http://www.alpacajs.org/examples.html
• http://jsonforms.io/#/examples
• http://schemaform.io/examples/bootstrap-example.html

Answer 2

solo per darvi un'altra scelta, una libreria ho creato:

https://github.com/brutusin/json-forms

JSON Generatore di moduli in formato HTML, che supporta sottoschemi dinamici (risoluzione al volo). Libreria estensibile e personalizzabile con dipendenze zero. Bootstrap componenti aggiuntivi forniti

var bf = brutusin["json-forms"].create({ 
 
    "$schema": "http://json-schema.org/draft-03/schema#", 
 
    "type": "object", 
 
    "properties": { 
 
    "s1": { 
 
     "type": "string", 
 
     "title": "A string", 
 
     "description": "A string input" 
 
    }, 
 
    "num1": { 
 
     "type": "integer", 
 
     "title": "A number", 
 
     "minimum": 1, 
 
     "maximum": 10, 
 
     "multipleOf": 3, 
 
     "description": "An integer multiple of `3`, between `1` and `10` (inclusive)" 
 
    }, 
 
    "array1": { 
 
     "type": "array", 
 
     "title": "An array values", 
 
     "items": { 
 
     "type": "object", 
 
     "properties": { 
 
      "value": { 
 
      "type": "string", 
 
      "title": "Value" 
 
      } 
 
     } 
 
     } 
 
    } 
 
    } 
 
}); 
 
var container = document.getElementById('container'); 
 
bf.render(container);

<link rel="stylesheet" href='https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/css/brutusin-json-forms.min.css'/> 
 
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'/> 
 
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms-bootstrap.min.js"></script> 
 
<div id="container"></div> 
 
<hr> 
 
<button class="btn btn-primary" onclick="alert(JSON.stringify(bf.getData(), null, 4))">getData()</button>&nbsp;<button class="btn btn-primary" onclick="if (bf.validate()) {alert('Validation succeeded')}">validate()</button>

Altro esempi dal vivo al http://brutusin.org/json-forms