Number field Options

All options are optional and can be left empty

Name Type Default Description
namestringlowercase label and replace spaces with '_'

no label -> name is generated i.e. 'f1'		This value is is the variable name used
labelstring | boolfield.nameThis is the label displayed for the field, if you want to hide the label then set this to false

The string can also contain mustache i.e.
'My choice {{value}}'
valuestring | function''Function will run once at instantiation
helpstring''This text is used to provide context or help in filling out the field
placeholderstring''This text will be visible in the text box until text is entered into the field
limitinteger0 (no limit)This is used to set the maxLength property and limits the number of characters that can be entered.
mininteger0Used for generating options automatically. This will do nothing unless a 'max' value is also set.
maxintegerOptions are generated for each integer from the value set for 'min' to the value set for 'max'.
stepinteger1When options are generated from 'min' and 'max' the step between each option is defined by this value
columnsinteger12The 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
targetselector | nodeIf 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
arrayboolean | objectfalseif 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.
showconditiontrueThis option controls whether this field should be visible to the user, allowing for fields to only be used if certain conditions are met
editconditiontrueSimilar to show but this option controls whether the field is enabled for interaction
parsecondition'display'This option determins if the field will be in the data result from myform.get()
validatearray'[]'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
requiredconditionfalseThis 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

examples


Name

new gform({fields: [
    {type: 'number', name: 'name_example'},
    {type: 'number', label: 'Label Example'},	
    {type: 'number'}
]})

					
					
					

					
Label

					

					
new gform({fields: [
{
    type: 'number', 
    label: 'Label Example'
}
]})

					
					
					

					
Value

					

					
new gform({fields: [
{
  type: 'number',
  label: 'Value Example',
  value: 'This is a test'
}
]})

					
					
					

					
Help

					

					
new gform({fields: [
  {
    type: 'number',
    label: 'Help Example',
    help: 'This is some help text'
  }
]})

					
					
					

					
Placeholder

					

					
new gform({fields: [
  {
    type: 'number',
    label: 'Placeholder Example',
    placeholder: 'Placeholder text'
  }
]})


					
					
					

					
Limit

					

					
new gform({fields: [
{
    type: 'number',
    label: 'Limit Example',
    limit: 3
  }
]})


					
					
					

					
Min

					

					
new gform({fields: [

]})

					
					
					

					
Max

					

					
new gform({fields: [

]})

					
					
					

					
Step

					

					
new gform({fields: [
    {type: 'number', label: 'Min/Max/Step', min: 2, max: 20, step: 2},
]})



					
					
					

					
Columns

					

					
new gform({fields: [
  {
    type: 'number',
    label: 'Column 1',
    columns: 4
  },
  {
    type: 'number',
    label: 'Column 2',
    columns: 8
  }
]})

					
					
					

					
Target

					

					
new gform({fields: [
    {type: 'number', name: 'name_example'},
    {type: 'number', label: 'Label Example'},	
    {type: 'number'}
]})

					
					
					

					
Array

					

					
new gform({fields: [
  {
    type: 'number',
    label: 'Array Example',
    array: {min: 2, max: 4}
  }
]})

					
					
					

					
Show

					

					
new gform({fields: [
  {
    label: 'Show number Field',
    name: 'show',
    type: 'checkbox'
  },
  {
    type: 'number',
    label: 'number Field',
    show:[{
      type: 'matches',
      name: 'show',
      value: true
    }]
  }
]})

					
					
					

					
Edit

					

					
new gform({fields: [
  {
    label: 'Edit number Field',
    name: 'edit',
    type: 'checkbox'
  },
  {
    type: 'number',
    label: 'number Field',
    edit:[{
      type: 'matches',
      name: 'edit',
      value: true
    }]
  }
]})

					
					
					

					
Parse

					

					
new gform({fields: [
  {
    label: 'Parse number Field',
    name: 'parse',
    type: 'checkbox'
  },
  {
    type: 'number',
    label: 'number Field',
    parse:[{
      type: 'matches',
      name: 'parse',
      value: true
    }]
  }
]})

					
					
					

					
Validate

					

					
new gform({fields: [
  {
    type: 'number',
    label: 'Validate Field',
    validate:[{type:'length', min: 2, max: 5}]
  }
]})

					
					
					

					
Required

					

					
new gform({fields: [
  {
    type: 'number',
    label: 'Required Field',
    required: true
  }
]})

					

					

						
© Escher Labs 2019