All options are optional and can be left empty
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | lowercase label and replace spaces with '_' no label -> name is generated i.e. 'f1' | This value is is the variable name used |
| label | string | bool | field.name | This is the label displayed for the field, if you want to hide the label then set this to falseThe string can also contain mustache i.e. 'My choice {{value}}' |
| value | string | function | '' | Function will run once at instantiation |
| help | string | '' | This text is used to provide context or help in filling out the field |
| placeholder | string | '' | This text will be visible in the text box until text is entered into the field |
| limit | integer | 0 (no limit) | This is used to set the maxLength property and limits the number of characters that can be entered. |
| columns | integer | 12 | The form is divided into a grid 12 columns wide, this is setting how many of those columns to display this element at, using this you can make milti-column forms |
| target | selector | node | If the target is not set then the field is appended to the parent element which is usually the main form but may be a fieldset | |
| array | boolean | object | false | if set to true or and object then this field will have buttons for adding and removing instances of the item. Additionally the value will become an array of all instances of this field. Further information on this can be found here. |
| show | condition | true | This option controls whether this field should be visible to the user, allowing for fields to only be used if certain conditions are met |
| edit | condition | true | Similar to show but this option controls whether the field is enabled for interaction |
| parse | condition | 'display' | This option determins if the field will be in the data result from myform.get() |
| validate | array | '[]' | This is a set of validations to perform on this field when validate() is called. Note: fields that are empty are not validated, if you require something to be filled in use the required attribute |
| required | condition | false | This is a special case for validation that is calculated live and updates the label to indicate the required status. Validation of this happens when validate() is called |
new gform({fields: [
{type: 'url', name: 'name_example'},
{type: 'url', label: 'Label Example'},
{type: 'url'}
]})new gform({fields: [
{
type: 'url',
label: 'Label Example'
}
]})new gform({fields: [
{
type: 'url',
label: 'Value Example',
value: 'This is a test'
}
]})new gform({fields: [
{
type: 'url',
label: 'Help Example',
help: 'This is some help text'
}
]})new gform({fields: [
{
type: 'url',
label: 'Placeholder Example',
placeholder: 'Placeholder text'
}
]})new gform({fields: [
{
type: 'url',
label: 'Limit Example',
limit: 3
}
]})new gform({fields: [
{
type: 'url',
label: 'Column 1',
columns: 4
},
{
type: 'url',
label: 'Column 2',
columns: 8
}
]})new gform({fields: [
{type: 'url', name: 'name_example'},
{type: 'url', label: 'Label Example'},
{type: 'url'}
]})new gform({fields: [
{
type: 'url',
label: 'Array Example',
array: {min: 2, max: 4}
}
]})new gform({fields: [
{
label: 'Show url Field',
name: 'show',
type: 'checkbox'
},
{
type: 'url',
label: 'url Field',
show:[{
type: 'matches',
name: 'show',
value: true
}]
}
]})new gform({fields: [
{
label: 'Edit url Field',
name: 'edit',
type: 'checkbox'
},
{
type: 'url',
label: 'url Field',
edit:[{
type: 'matches',
name: 'edit',
value: true
}]
}
]})new gform({fields: [
{
label: 'Parse url Field',
name: 'parse',
type: 'checkbox'
},
{
type: 'url',
label: 'url Field',
parse:[{
type: 'matches',
name: 'parse',
value: true
}]
}
]})new gform({fields: [
{
type: 'url',
label: 'Validate Field',
validate:[{type:'length', min: 2, max: 5}]
}
]})new gform({fields: [
{
type: 'url',
label: 'Required Field',
required: true
}
]})