Demo

JSON

Top level

Key	Values	Description
fields Mandatory	Array of Fields String	The array of objects containing the fields configuration
submit_button_text Default: Submit	Button text String	The text to display on the submit button.
cancel_button_text Default: Cancel	Button text String	The text to display on the cancel button.
hide_validation Default: true	true/false Boolean	Whether or not to show the valid state on inputs.
button_orientation Default: right	left/right Options	The orientation to display the button controls.
form_controls_id Automatically generated	An Element ID String	JsonForm automatically handles specifying and creating the IDs needed for Form generation. If you want to override the placement of the Form Controls, use this key.

Fields key

The entire Fields key is an array of objects. The various configuration keys of the object is outlined below. The fields will be inserted in the order they are in the array.

Key	Values	Description
id Mandatory	field_id String	The ID for this field which will be used on the generated response payload
name Mandatory	Field Name String	Display name of the field that will be shown to the user
type Mandatory	field, html, value String	The type of field. field: An input field, specify parameters in field key. html: Injects HTML, value: stores a value to return in response
field Mandatory for type=field	Field keys Object	The configuration object for the Field type
html Mandatory for type=html	HTML String	The HTML to inject
value Mandatory for type=value	Anything Anything	The value to store only to return in the response

Field keys

The configuration keys to use when building a field object within the top level object fields.

Key	Values	Default	Description
type	Input type String	text	The type of input to use for this field
required	true/false Boolean	true	Whether or not this field is required
readonly	true/false Boolean	false	Whether or not this field is read only
options Mandatory for type=select or type=radio	Array of options Array	[]	All the options to display for an select/radio input
placeholder	Anything String	None	The value to show in the placeholder
default_value	Anything String	None	The value to prefill the field with
use_validate_callback	true/false Boolean	false	Whether or not to use specified validate_callback to validate the value on input
inline	true/false Boolean	false	Whether to display the radio fields as inline versus vertical.
width	Grid column width 1-12	12	The width of the input.
rows	Number Number	3	The number of rows to display in the textarea
helptext	Anything Anything	None	Help text to display along with the input
size	large/normal/small Options	normal	The size of the input (only applies to certain types: textarea and normal inputs)
maximum_entries	Only for Lists Number	100	The maximum number of entries allowed in a list

Methods

JsonForm.create(FormID, FormJSON, FormName)

FormID: the selector to place the form within.

FormJSON: the JSON payload (based on the above keys) to use when creating the form.

FormName Optional: the form instance name. By default is "default" – only use when you have multiple forms on the same page.

JsonForm.registerSubmit(SubmitHandler, FormName)

SubmitHandler: the submit handler to fire. It must be a function that accepts 2 arguments: formValid, formData. Check formValid (boolean) for the status of the form. If one or more fields fail validation, it will be false, otherwise it is true. formData is an object containing the field IDs and the values submitted.

FormName Optional: the form instance name. By default is "default" – only use when you have multiple forms on the same page.