web-dev-qa-db-fra.com

comment créer un formulaire html en utilisant une définition JSON?

Je suis à la recherche d'une bibliothèque javascript qui me permet de stocker des formulaires (html) au format JSON, avec un peu d'intelligence dans la validation des entrées côté client. Quelque chose comme:

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$/;
}

(Ceci est tiré de http://docs.angularjs.org/#!cookbook.form ). C'est presque ce que je veux, car il offre une validation côté client de base avec des expressions régulières et vous pouvez fournir des valeurs par défaut, mais il semble que vous ayez toujours besoin de vous pour créer le formulaire HTML.

Je veux quelque chose qui ne nécessite que la définition. Des idées?

htmljsonvalidationformsdynamic
22
Ed_

Dans l'auto promotion sans vergogne, je voudrais également mentionner mon plugin jQuery.dForm . Il existe depuis un certain temps maintenant et prend en charge le plug-in de validation jQuery, l'interface utilisateur jQuery et est facilement extensible. Voici à quoi cela ressemble:

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");
17
Daff

Je suggère d'utiliser formulaire JSON .

Il prend un schéma JSON et peut instantanément créer un formulaire pour celui-ci, et vous donne également des options pour personnaliser davantage le formulaire. Par exemple.:

$('#myform').jsonForm({
  schema: {
    name: {
      type: 'string',
      title: 'Name',
      required: true
    },
    age: {
      type: 'number',
      title: 'Age'
    }
  }
});

… Générerait un formulaire avec deux entrées dans l'élément #myform. (jQuery est facultatif.)

L'utilisation du format normalisé JSON Schema offre d'autres grands avantages et davantage d'outils pour travailler avec la définition des données.

10
fiddur

Je serais d'accord avec Jeremy SAngular Schema Form est exceptionnel. Il suit le même schéma que JSON Form et j'ai commencé à l'utiliser en production et cela fonctionne très bien.

Il est également extensible et j'ai assez rapidement écrit un outil pour lire la définition d'hyper-schéma et extraire les options de champ sélectionnées à partir d'une source externe et regarder les autres champs connexes pour leurs données avant de le faire. Cela n'a pris qu'une journée pour le construire, il suffit de dire qu'il est vraiment facile à étendre et comme il profite également de Angular je le classerais comme le meilleur choix).

Si vous n'utilisez pas Angular alors le formulaire JSON serait mon option préférée car je vois son schéma et son modèle de formulaire émerger comme un peu standard avec ces deux projets l'utilisant. Aussi, étant donné mon expérience de travail dans la gestion des services d'entreprise, il est logique que presque tous les outils de gestion des services disposent d'un modèle de données, puis d'un composant d'administration de conception de formulaire pour étendre le modèle.

Avis de non-responsabilité: je ne maintenais pas Angular Schema Form lorsque j'ai écrit cela.

Je ne suis devenu responsable du projet qu'un an plus tard car je l'ai déjà aimé.

5
Anthropic

Vérifiez certainement Alpaca: http://www.alpacajs.org

Il rend les formulaires HTML à partir du schéma JSON en utilisant Bootstrap, jQueryUI, jQuery Mobile ou des contrôles Web directs. Il a une grande bibliothèque de contrôles et toutes sortes de fonctionnalités astucieuses.

Nous l'utilisons sur Cloud CMS ( http://www.cloudcms.com ) pour rendre des interfaces utilisateur vraiment intuitives.

L'alpaga lui-même est sous licence Apache 2.0 et sur GitHub ( https://github.com/gitana/alpaca ).

La prochaine version 1.5.0 introduit la prise en charge pure des guidons et des versions de gulp personnalisées. Des trucs assez cool.

4
Michael Uzquiano

Angular ne résout pas votre problème dès le départ, car il suppose que vous avez du HTML statique auquel vous souhaitez lier certaines données.

Cela dit, vous pouvez utiliser angular pour atteindre vos objectifs. Vous pouvez créer une nouvelle balise (widget angulaire) qui prendra un objet js et crée dynamiquement le formulaire DOM avec tous les angular attributs de validation. Vous compilez ensuite le formulaire avec le compilateur d'angular et le joignez à votre page. Cela se traduira par un formulaire créé dynamiquement avec toutes les fonctionnalités de validation et de liaison de données angular existantes fonctionnant comme avec un html statique.

Il n'y a rien que je puisse penser qui vous empêcherait de le faire via angular.widget api, mais ce n'est pas une tâche triviale.

Pouvez-vous m'en dire plus sur vos structures de données? Je me demande si avoir juste un ensemble de formulaires et utiliser le bon au bon moment ne serait pas suffisant. Pourquoi avez-vous besoin que la création de formulaire soit complètement dynamique et basée sur les données?

MISE À JOUR: La solution angular peut être trouvée sur https://groups.google.com/forum/#!topic/angular/f8KbLtT_Mqs

3
Igor Minar

Puis-je suggérer humblement Metawidget ?

Il génère des formulaires HTML à partir d'objets JSON complexes arbitraires. Exemple simple de JavaScript:

<!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>

Il prend également en charge:

  • augmenter l'objet JSON avec des sources supplémentaires de métadonnées, telles que le schéma JSON ou les métadonnées des services REST
  • des frameworks tels que JQuery UI, JQuery Mobile, AngularJS
  • bibliothèques de composants et validateurs tiers
  • dispositions enfichables
3
Richard Kennard

Découvrez plugin jQuery Templates .
Il y a quelque temps, j'ai rédigé un petit billet de blog sur Liaison de données côté client avec des modèles jQuery . Il me semble que c'est exactement ce que vous recherchez.

1
Kon

J'ai utilisé l'éditeur JSON de Jeremy Dorn pour diverses applications et j'en ai toujours été satisfait! Il utilise le schéma JSON et ajoute quelques options pour la génération de formulaire (car vous pourriez éventuellement avoir une variété d'entrées pour un type de structure de données donné)

https://github.com/jdorn/json-editor

1
Fabio Beltramini

Découvrez InputEx , il semble exactement ce que vous voulez.

Il utilise JSON pour définir la forme entière :

// 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"}
            }
        }
    }
 }
};

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

0
dakhota

Jetez un oeil à brutusin: json-forms .

Il accepte un schéma JSON et les données JSON initiales pour remplir le formulaire.

0
idelvall