web-dev-qa-db-fra.com

Génération de formulaires HTML à partir de flux JSON ou XML à l'aide de JQuery

Je souhaite créer un formulaire HTML basé sur des données XML ou JSON à l'aide de Jquery et je prévois également de valider tous les champs de formulaire qui peuvent être vides ou incorrects.

Je voudrais savoir s'il existe d'autres programmes/fonctions qui génèrent un tel formulaire de manière dynamique à la volée et la meilleure façon de procéder pour l'implémenter. Tous les widgets ou bibliothèques jquery qui fonctionnent le mieux avec des exemples de fonctionnement seraient très appréciés

Et aussi quel flux utiliser au mieux dans ce scénario XML ou JSON et expliquer pourquoi?

Merci

jqueryxmljson
17
user244394

J'en ai trouvé quelques-unes qui pourraient vous aider:

Génération de formulaires à partir du schéma JSON:

Génération de formulaires à partir d'un schéma XML:

Exemples de différentes bibliothèques pour générer le formulaire:

14
user1386320

Juste pour vous donner un autre choix, une bibliothèque que j'ai créée:

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

Générateur de formulaires JSON Schema vers HTML, prenant en charge les sous-schémas dynamiques (résolution à la volée). Bibliothèque extensible et personnalisable avec aucune dépendance. Bootstrap modules complémentaires fournis

 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>

Plus d'exemples en direct sur http://brutusin.org/json-forms

9
idelvall