is this the desired behavior or am i making some mistake?

i am displaying the values like

onSubmit:function (errors, values) {
        $jq('footer').find('.alert').html(JSON.stringify(errors));
}

the returned json values contains only those fields which contains some value.

I am wondering what paths are available for building a Wizard out of a jsonform?

I would like to edit a large object as multiple steps in a wizard. I have tried using jsonform to render forms which display subsets of the data in the object, but when the submit is executed it validates all data in the schema not just what is being displayed on the current form.

How can we trigger a validate which just checks what is being displayed and highlights the form so that we can decide whether to show the next step or stay on the current step?

To speed up the authoring of a JSON Form object, it would be good to be able to start from an example of a JSON structure that the form is to generate and automatically create a basic JSON Form object that would generate that structure.

For instance, given:

{
  "name": {
    "firstname": "Francois",
    "lastname": "Daoust"
  },
  "adult": true
}

... that small tool could generate:

{
  "schema": {
    "name": {
      "type": "object",
      "properties": {
        "firstname": {
          "type": "string",
          "title": "name.firstname"
        },
        {
          "lastname": {
            "type": "string",
            "title": "name.lastname"
        }
      }
    },
    "adult": {
      "type": "boolean",
      "title": "adult"
    } 
  },
  "form": [
    {
      "type": "fieldset",
      "items": [
        "name.firstname",
        "name.lastname" 
      ]
    },
    "adult"
  ]
}

Such a tool is just a beginning, obviously. It cannot detect additional constraints on data and cannot produce meaningful fields titles and form structure, but it would give a very easy way to produce a JSON Form object.

See suggestion by moriation on dev-joshfire mailing-list:
https://groups.google.com/d/topic/joshfire-dev/-CfYn73ZtmM/discussion

JSV ?

A key such as:

{
 "type": "string",
 "title": "Required key",
 "required": "true"
}

... will make the submission crash. The problem seems to come from the fact that "true" is not true. At a minimum, JSONForm should report the fact that the required property has an invalid value.

In playground/?example=fields-array if you add a top-level element and then re-order, one item disappears.

Then if you add second-level elements and just keep playing around, you get top-level elements at the second level.

Etc.

i couldn't figure out a way to assign css class & html 5 data tags to the input elements itself!
is it possible to do this in the current build?

I am not happy with the current form validation and wanna use jquery-validation-1.10.0 plugin which i used couple of times earlier & found good. Its light weight & also provide Instant validation.

But it requires to assign css classes to the input elements itself.

Any solution?

Also its needed to change the size of the input [text] which is currently hard coded as 'input-xlarge xlarge'. Although this can be achieved by defining custom css styles.
Also the <textarea> field's width & height is hardcoded to be h:150px & w:100% if not specified.

but IMHO any this kind of width & height styles should not be hard coded in the plugin itself. let it be handled by the bootstrap itself with its default styles as its handles when no classes are assigned to the elements.

i have removed these 2 things for now in my local copy of jsonform.js.

if checkbox is unchecked and press submit button, uncheck state is not regonized at all because of serializeArray() . There is one fix for jquery ( https://github.com/madrobby/zepto/pull/248/commits ), but i think it is not added to main jQuery branch. One possible way to fix this issue is to add concat just after serializeArray() -->

line: 2138
/* Because serializeArray() ignores unset checkboxes and radio buttons: */
formArray = formArray.concat(
$(':input[type=checkbox]:not(:checked)', this.el).map( function() {
return {"name": this.name, "value": this.checked}
}).get()
);

As raised in #43, JSONForm does not yet support schemas that use the $ref JSON Schema keyword.

At a minimum, JSONForm should support internal references. Support for external references may be harder to achieve due to the async nature of such references.

See JSON Reference and JSON Schema URI resolution scope alteration with the "id" keyword for details.

For organizing a form it would be nice to be able to create an arraytab with already loaded Tabs without using the schema, as this may only be a layout issue.
I've been trying to accomplish this with the tpldata withou success, is it possible ?

Something like this

{
"schema": {.....}
,
  "form": [
    {
     "key":"steps",                      //I want to specify wich tpldata Array should be used
      "type": "tabarray",
      "items": {
        "type": "section",
        "items": [
          "schema_item1","schema_item2"
        ]
      }
    }
  ],
  "tpldata":{
    "steps":[{"name":"Paso 2"},{"name":"Paso 2"}]             //Maybe Name or title or legend
  }
}

Considering the following JSON Schema where an object contains another object with a single property of type Number :

{
    "type":"object",
    "title":"object",
     "properties":{
            "test":{
                 "type":"object",
                 "title":"object",
                 "properties":{
                        "number":{
                             "type":"number",
                             "title":"number"
                        }
                 }
            }
    }
}

Form value without filling fields is {"test":{}}

If I replace the type property by a String, the behavior is different:

{
    "type":"object",
    "title":"object",
     "properties":{
            "test":{
                 "type":"object",
                 "title":"object",
                 "properties":{
                        "number":{
                             "type":"string",
                             "title":"string"
                        }
                 }
            }
    }
}

Form value without filling fields is {}

Shouldn't be the form value the same in the two cases ?

Expected value {}

Thank you for the clarification.

Code that enhance generated fields sometimes uses global selectors such as $(id), where id is an element generated by the underlying field. This works well provided the form element is in the DOM. However, JSON Form may very well be applied to an element that has not yet been inserted in the DOM (e.g. to prepare a view before rendering).

All selections in JSON Form should rather be scoped to node.el to guarantee that they parse the right subtree, no matter whether it is in the main DOM tree or not.

Similarly, the ACE editor receives "node.id" + "__ace" as initialization parameter. Internally, the ACE library uses getElementById to retrieve the element, which fails when the element is not yet in the DOM tree. The ACE editor should rather receive the element directly.

As mentioned in the documentation, the selectfieldset element is a purely visual construct for the time being, meaning the selected alternative does not appear in the submitted form. It's often convenient to know which alternative the user selected without having to look at submitted values to detect other submitted values.

Besides, one of the alternative could well be an empty form, e.g. to let the user choose between None, Choice 1 or Choice 2.

JSON Form should support linking a selectfieldset element to a schema key, using a declaration such as:

{
  "schema": {
    "choices": {
      "type": "string",
      "title": "Make up your mind",
      "enum": [ "None", "Choice 1", "Choice 2"],
    ...
  },
  "form": [
    {
      "type": "selectfieldset",
      "key": "choices",
      "items": [
        { "type": "section", "title": "None", ... },
        { "type"; "section", "title": "Choice 1", ... },
        { "type": "section", "title": "Choice 2", ... }
      ]
    }
  ]
}

The number of items in the items array must match the number of choices in the enum array.

When a form is submitted, errors reported by the JSON Schema validator that are linked to an input field are correctly reported inline in the form.

The validator may also report errors that are not linked to any input field. Such errors are simply ignored... making submission fail for no apparent reason!

Examples of errors that are not linked to a particular input field:

• Schema errors (typically explains #53)
• A required flag on an object (as opposed to on its properties)
• A non validated constraint on a hidden input field.

Explain how Transloadit keys need to be provided in particular and how uploaded file is is represented internally.

I have a default value that is HTML which contains double braces and it looks like jsonform is eating those braces. Can this be confirmed and if so how to disable?

Does jsonform support readonly input fields?

If there's a zero in the value, it can't be displayed in the input of the generated form.

The "0" works, but it's not reasonable to provide a "0" for a integer value.

All examples currently show the schema embedded in the html page. It would be nice (esp for complex or long schemas) to show an example using an external file containing the JSON schema. In that situation, you could keep the schema document separate and in a version control system.

First, thanks for this code, I'm developing an admin interface and it's a big time saver!

From the documentation I understand that elements in the default template can be overridden. However, given this:

$('#form').jsonForm({
    schema: {
        username: {
            type: 'string',
        },

        password: {
            type: 'string'
        }
    },

    form: [
        '*',
        {
            key: 'password',
            type: 'password'
        },
        {
            type: 'submit',
            value: 'Submit'
        }
    ]
});

The password field created by the default template isn't overridden by an , instead the latter is created in addition to the former. Is this intended? If so, it would be nice to have a middle way between "I'll use defaults for all fields" and "I'll specify every field".

Check example "Fields - Array with tabs: the tabarray type" in the playground. First click on the "add" button at the nested level actually creates a second item at the top level. The form works well afterwards.

I'm looking for a form generator like JSON Form, I found MetaWidget that lacks of support (especially for non Java environment).

Do you plan some integration with AngularJs?
Any suggestions?

i really find this plugin useful but also found some issues to its usability & behavior.

schema:{}

Above schema is used to define the form schema

form:{}

but above form is also used to define (override) the schema And Also to define the ordering of the form elements. I don't think there is anything that we are overriding here, its all FirstHand definition at the very same form definition file.

Issues:
[1]
Just by putting form:{} we entered into both overriding & ordering mode.
Lets say i came here to override 1 field out of 20 in the form But now i have to write the remaining 19 too bcoz' jsonform thinks i am writing the form element's ordering sequence else they won't show.

[2]
Its not DRY. asking to repeat the same field again in the form:{} just to set its type or css class which could be set inside the schema:{} itself as part of its definition.
To set a 'field's type textarea' we have to write it again inside the form:{}

[3]
'*' practically doesn't seems use-able for ordering purpose.... or any

i am suggesting a modified structure which may solve these issues:

"schema":{
    "names": {
        "title":            "Names",
        "type":             "string",
        "typeOverride":     "textarea",      // **new**
    },
    "dob": {
        "title":            "Date of Birth"
        "type" :            "string",
        "typeOverride":     "date",          // **new**
        "htmlClass":        "calendar",     // **new**
        // any more overriding attribute ...n
    },
"order":{                             // **new**
        "names", "dob"
    },
},
"form":[
    {
        // use this section only for layout specification of the elements
    }
]

what u people think?

i was figuring out how to assign readonly & maxlength attribute to input elements in my form but couldn't find it.

there are so many attributes to control the form elements input which might be needed.

how can they be defined in the form schema?

Can I suggest that there be an alteration to allow forcing a value into an enum for display perhaps with a format like the following to allow styling to illustrrate its origin:

<option value="{{value}}" class="forced-value">{{value}}</option>

So if form has legacyClass: "{{class name}}" as below:

{
    schema: {
        enemies: {
            title: "Scariest Enemy!",
            enum: ["dragons","pirates"],
        }
    },
    form: [
        {key: "enemies", legacyClass: "forced-value"}
    ],
    value: {
        enemies: "ninjas"
    }
}

And it is passed value: {enemies:"ninja"} which isn't in the enum as in the example above, then it could be added to the enum list and set as selected with output along the lines of:

<option value="ninjas" class="forced-value" selected>ninjas</option>

Where I work we are absolutely not allowed to overwrite legacy information without good reason. So I need to make sure it is included in the drop down and flagged as "historic", but I can add that label in css if the value was there with an appropriate css style.

Multiple options - checkboxes type example in playground is broken.

Gives this error -
Entered content is not yet a valid JSON Form object.

The JSON Form library returned:
ReferenceError: node is not defined

For very large forms, or auto-generated schemas it is impractical to control the layout using the form section of the configuration (a la https://github.com/joshfire/jsonform/wiki#controlling-the-layout-of-the-form).

The use-case I struggled with was trying to use the 'checkboxes' form layout. I have found no way to specify that an array should be treated as a checkbox array without also being forced to then specify the entire form layout. This is an unworkable solution for me as I have many hundreds of fairly deeply nested auto-generated fields in the schema which I couldn't possibly justify defining the layout for using the 'form' parameter as it's too variable. But I would benefit hugely from the option of specifying that this, and only this, field needs to have layout information - while all other fields can be created using the default form layout.

This feature request is therefore to allow users to specify the default "*" behaviour along with the option to specify override behaviour for specific fields only. This is in contract to the current situation where one either uses the default for the whole form, or specifies the whole form manually.

If I've missed something or got this wrong, then I'd suggest that this ticket turns from a new feature request into a request to improve the documentation to better reflect the solution that already exists.

Seems like minItems doesn't work as expected on tabarray. The minus button deletes one more then set in minItems. Still the button is greyed out(class disabled).

jsonform.js line 999:

-          if (node.children.length < boundaries.minItems) return false;
+          if (node.children.length <= boundaries.minItems) return false;

fixes the problem.

Just wondering if you have any interest in also making this compatible with Zurb Foundation, which some prefer over Twitter Bootstrap. From glancing at the code it looks very tied to Bootstrap.

As raised by @simbeto, JSON Form should not impose the size of the input fields it generates. Drop the input-xlarge and other such references from the code

The current version ignores the default value set for arrays in the schema definition.

How is it possible to leave an array empty by default ?

The wiki says it will create 1 item by default. Is it possible to override this ?

I'm not sure if this is intended behavior, but playground/?example=templating-values shows that references values don't auto-update when the referenced input fields are blurred.

And similar to XForms' incremental flag it would be great if updates can happen after every keystroke (not just on blur)

Hi,

first of all, you've done a great job on this useful project.

I've played with the playground project, and looked at the source.
I noticed the field type 'file' is rendered in the generated form.

however reading the source, It seems file upload handling was commented out on submit.
since the 'file' type is not available in the documentation, I guess the feature was dropped.

I need to add this feature, and eventually contribute to the project.
Any instruction on adding new field types?

Thank you

When I choose a color, it doesn't seem to remember the value.
It still stays black.

Would it be possible to place two (or more) checkboxes next to each other on the same line? The default behaviour is that each checkbox occupies one line. Example:

{
  "schema": {
    "check1": {"type": "boolean"},
    "check2": {"type": "boolean"}
  },
  "form": [
    {"key": "check1","inlinetitle": "Number 1"},
    {"key": "check2","inlinetitle": "Number 2"}
  ]
}

Would be cool if validation happened as soon as there were a blur event.

When defining a selectfieldset inside of a tabarray, it doesn't get presented correctly. The drop down list is there but it doesn't affect the fields shown. Here is a short example reproducing the issue:

{
"schema": {
    "stuff": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "text": {"type": "string","title": "Text"},
          "category": {"type": "string","title": "Category",
          "enum": ["Geography","Entertainment","History","Arts","Science","Sports"]}
          }
        }
      }
    },

  "form": [
    {
      "title":"Devices",
      "type": "tabarray",
      "items": {
        "type": "section",
        "items": [
          {
          "type":"section","items":
          [{
            "type": "selectfieldset", "title": "Make a choice",
            "items":[
              {"type":"section","legend":"choice 1","items":[
              {"key": "stuff[].text"}]},

              {"type":"section","legend":"choice 2","items":[
              {"key": "stuff[].category"}]}
              ]}
          ]}]}
    }]
}

If you simply remove the tabarray, it works:

{
"schema": {
    "stuff": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "text": {"type": "string","title": "Text"},
          "category": {"type": "string","title": "Category",
          "enum": ["Geography","Entertainment","History","Arts","Science","Sports"]}
          }
        }
      }
    },

  "form": [
    {
            "type": "selectfieldset", "title": "Make a choice",
            "items":[
              {"type":"section","legend":"choice 1","items":[
              {"key": "stuff[].text"}]},

              {"type":"section","legend":"choice 2","items":[
              {"key": "stuff[].category"}]}
              ]
    }]
}

Use jQuery File Upload to upload the file in the background.

Error: The JSONForm contains an element that links to an element in the JSON schema (key: "pathParamTypes[]") and that should not based on its type ("root")
file:///Users/sowens/Documents/workspace/api-catalog-ui/WebContent/components/joshfire/lib/jsonform.js
Line 2934

I don't understand what this error is trying to say or what to do to fix it.

Here is the draft v3 schema that the form is trying to render that causes the error:

{
    "type":"object",
    "$schema":"http://json-schema.org/draft-03/schema",
    "id":"/api-endpoint/models/api-resource",
    "required":false,
    "description":"Documents and defines a resource within an API",
    "properties":{
        "id":{
            "type":"string",
            "default":null,
            "required":false,
            "title":"Unique Id",
            "description":"Globally Unique identifier for this endpoint (The collection implementation will assign this value on create)"
        },
        "apiId":{   
            "type":"string",
            "title":"Api Id",
            "description":"References an api-catalog-entry by id",
            "default":null,
            "required":true
        },
        "description":{
            "type":"string",
            "title":"Description",
            "required":true,
            "description":"Breifly describes the resource in Google Search results detail."
        },
        "documentationUri":{
            "type":"string",    
            "required":false,
            "title":"Documentation URI",
            "description":"Provides a link to detailed documentation about the resource."
        },
        "endpoint-pattern":{
            "type":"string",
            "default":"COLLECTION",
            "required":false,
            "enum":[ "COLLECTION", "CONTROLLER", "STORE" ],
            "title":"Endpoint Pattern",
            "description":"Describes the pattern this endpoint method follows. See 'REST API Design Rulebook' by Mark Masse for details."
        },
        "pathParamTypes":{
            "type":"array",
            "items":{"$ref":"#/definitions/paramTypeDef"},
            "required":false,
            "title":"Path Parameter Types",
            "description":"A list of path parameter type definitions used in this resource."
        },
        "queryParamTypes":{
            "type":"array",
            "items":{"$ref":"#/definitions/paramTypeDef"},
            "required":false,
            "title":"Query Parameter Types",
            "description":"A list of query parameter type definitions used in this resource."
        },
        "methods":{
            "type":"array",
            "items":{"$ref":"#/definitions/methodDescriptor"},
            "required":true,
            "title":"Resource Methods",
            "description":"Actual methods this resource uses.  With respect to a given resource each method must have a unique combination of [HTTP-Method, input-model, output-model, input-format, output-format, and sub-path]"
        }, 
        "pathTemplate":{
            "type":"string",
            "default":"/myResource",
            "required":true,
            "title":"Path Template",
            "description":"A path template is used to match inbound paths to endpoints and consists of both literal and variable path segments."
        }
    },
    "definitions":{   
        "paramTypeDef":{
            "type":"object",
            "required":false,
            "description":"Documents an individual parameter type.",
            "properties":{
                "description":{
                    "type":"string",
                    "required":true,
                    "title":"Description",
                    "description":"Briefly describes the purpose and semantics of the parameter"
                },
                "logicalType":{
                    "type":"string",
                    "default":"DEFAULT",
                    "required":true,
                    "title":"Logical Type",
                    "description":"An identifier for a this parameter description.  This value can be used to cross reference template variables to documentation about the parameter type."
                },
                "picture":{
                    "type":"string",
                    "default":"[0-9a-zA-Z\\_\\-]{1,40}",
                    "required":true,
                    "title":"Regex Picture",
                    "description":"A regular expression describing the valid values of this param."
                }
            }
        },
        "methodDescriptor":{
            "type":"object",
            "id":"/api-resource/models/method-descriptor",
            "required":false,
            "title":"Method Description",
            "properties":{
                "description":{
                    "type":"string",
                    "required":true,
                    "title":"Description",
                    "description":"Briefly describes what the method does."
                },
                "documentationUri":{
                    "type":"string",
                    "required":false,
                    "title":"Documentation URI",
                    "description":"Provides a link to detailed documentation about this method."
                },
                "httpMethod":{
                    "type":"string",    
                    "required": true,
                    "default":"GET",
                    "enum":[ "DELETE", "GET", "HEAD", "OPTIONS", "POST", "PUT", "TRACE" ],
                    "title":"Http Method",
                    "description":"The actual HTTP method that this resource method responds to."
                },
                "inputModel":{
                    "type":"string",
                    "required":false,
                    "title":"Request Body Type",
                    "description":"References a schema which defines the object structure of the input data (e.g. 'com.myorg.myapi.domain.models.MyClass')."
                },
                "inputFormat":{
                    "type":"array",
                    "required":false,
                    "title":"Request Body Format",
                    "description":"A list of supported formats (mimetypes) for the request body (e.g. 'application/json')",
                    "items":{
                        "type":"string",
                        "default":"application/json",
                        "required":false
                    }
                },
                "pathTemplate":{
                    "type":"string",
                    "required":false,
                    "title":"Path Template",
                    "description":"This optional template will be appended to the resource path template."                    
                },
                "queryParams":{
                    "type":"array",
                    "required":false,
                    "title":"Query Parameters",
                    "description":"Documents the query parameters utilized by this method",
                     "items":{
                         "type":"object",
                         "properties":{
                             "queryArgName":{
                                 "type":"string",
                                 "required":true,
                                 "description":"The name of the query param as it would appear in the query string"
                             },
                             "logicalType":{
                                 "type":"string",
                                 "required":true,
                                 "description":"A logical type name as defined in the resource queryParamTypes list"
                             },
                             "required":{
                                 "type":"boolean",
                                 "description":"Set to true if the query parameter must be present in the call.",
                                 "required":false,
                                 "default":false
                             },
                             "singleton":{
                                 "type":"boolean",
                                 "description":"Set to true if the query parameter must appear no more than once in the query string.",
                                 "required":false,
                                 "default":true
                             }
                         }
                     } 
                },
                "returnModel":{
                    "type":"string",
                    "required":false,
                    "title":"Return Type",
                    "description":"Identifies a schema for the object model returned in the response body (e.g. 'com.myorg.myapi.domain.models.MyClass' or 'com.myorg.myapi.domain.models.MyClass-as.jsonFormEnvelope')"
                },
                "returnFormats":{
                    "type":"array",
                    "required":false,
                    "title":"Return Formats",
                    "description":"A list of supported formats (mimetypes) for the response body.  The values specified here may be used to construct a valid HTTP 'Accept' header.",
                    "items":{
                        "type":"string",
                        "default":"application/json",
                        "required":false
                    }
                }
            }
        }
    }
}

Given the following schema:

        "parameters": {
            "title": "Parameters",
            "description": "Command Line Parameters",
            "type": "array",
            "required": false,
            "minItems": 0,
            "items": {
                "type": "object",
                "additionalProperties": false,
                "properties": {
                    "name": {
                        "title": "Name",
                        "type": "string",
                        "required": true
                    },
                    "value": {
                        "title": "Value",
                        "type": "any",
                        "required": true
                    }
                }
            }
        }

Result: The subsequent form is unable to save a parameters array with 0 items. It always displays a minimum of one item who's name is required preventing the form from being saved.

Expected: user should be able to remove all items from an array with minItems set to 0, or with no minItems set. This would save out an array [] when creating the JSON.

If I wanted to represent an array of objects as a table, how would I use JSONForm to do that? Using the "Extending JSON Form with your own fields" JSONForm.fieldTypes approach?

Setting the expandable property to true for a fieldset works fine for the first item in a tabarray. In item 2 it is no longer possible to collapse (or expand) the fieldset. Example:

{
"schema": {
    "stuff": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "text": {"type": "string","title": "Text"},
          "category": {"type": "string","title": "Category",
          "enum": ["Geography","Entertainment","History","Arts","Science","Sports"]}
          }
        }
      }
    },

  "form": [
    {
      "title":"Stuff",
      "type": "tabarray",
      "items": {
        "type": "fieldset","title":"Fieldset","expandable":true,
        "items": [
          {
          "type":"section","items":
          [{
            "type": "selectfieldset", "title": "Make a choice",
            "items":[
              {"type":"section","legend":"choice 1","items":[
              {"key": "stuff[].text"}]},

              {"type":"section","legend":"choice 2","items":[
              {"key": "stuff[].category"}]}
              ]}
          ]}]}
    }]
}

Boolean keys in the schema are represented by a checkbox by default. From time to time, it may make sense to represent that alternative using either a radios or select field type. That is not possible for the time being as JSON Form treats values these fields as strings and thus always produce true values ("false" actually evaluates to true).

The following form definition should work:

{
  "schema": {
    "activated": {
      "type": "boolean",
      "title": "Activation status"
    }
  },
  "form": [
    {
      "key": "activated",
      "type": "select",
      "titleMap": {
        "false": "Deactivated",
        "true": "Activated"
      }
    }
  ]
}

The titleMap could perhaps use boolean values as keys instead of a string.

I think that the buttons should line up with the children items that are added, not the parent.

playground/?example=fields-array just looks counter-intuitive.

"minItems": X,
"maxItems":Y

Is not working on array.

It works maxLength on tabarray, but I think that maxItems should be used.

jsonform is giving error when setting html 5 input types viz date, email, etc. while bootstrap allows for all html5 input types.

Error:

"Uncaught Error: The JSONForm contains an element whose type is unknown: "date" jsonform.min.js:95"

IMO it should allow any 'type' as specified when overriding it by specifying under the form:[{ }] and do not invalidate it
OR
the list of valid types must be extended to support html 5 types.

Here is my schema:

    "schema":{
        "name":  {
            "type":    "string",
            "title":   "Name"
        },
        "dob":  {
            "type": "string",
            "title":"Date of Birth"
        }
    },
    "form":[
       "name",
      {
        key: "dob",
        type:"date"
          }
],