This has to be redone 
{
//these first four are the same as the properties passed to new cot_form()
id: 'my_form_id',
title: 'My Form',
rootPath: '/resources/my_app/', //only required when using any validationtype=Phone fields
success: someFunctionDefinedSomewhereElse,
useBinding: true, //defaults to false, set to true to use data binding with a CotModel object.
//use in conjunction with the setModel method of CotForm and the bindTo attribute of field definitions
sections: [ //an array of sections on the form
{
//these first three are the same as the properties passed to new cot_section()
id: 'section_one',
title: 'Section One',
className: 'Some special class'
readSectionName:true, // optional enum: [true,false]. If true, screenreaders will read the section title before each fields title of the section. Used when you have sections which fields looking the same.
rows: [ //an array of rows within the current section
{ //for each row, specify a grid OR an array of fields:
fields: [ //an array of fields within the current row
{
type: '', //optional, enum: ['number','email', 'phone', 'hidden','html', 'button', 'static', 'checkbox', 'radio', 'text' (default), 'daterangepicker', 'dropdown', 'multiselect', 'datetimepicker', 'textarea', 'password'], the type of field to add to the row
// NOTE: When field type is 'phone' or 'email', validationtype is not necessary anymore. It will be added automatically
id: 'field_one', //required, used to create the dom element id
title: '', //required except for type=html|button|static, the title/label for the field
className: 'col-xs-6', //optional, override the auto-generated css grid col classes, ex: col-xs-12
//NOTE: if type=button, className is applied to button as well. if you DO NOT want this behaviour, you can explicitly specify the btnClass option below
btnClass: 'success', //optional, only applies when type=button, defaults to 'success', determines the bootstrap btn-x class used to style the button, valid values are here: http://getbootstrap.com/css/#buttons-options
orientation: 'horizontal', //optional, enum: ['horizontal','vertical']. default is vertical. this affects fields like radio
addclass: 'additional-class', //optional, append to the auto-generated classes
required: false, //optional, defaults to false
requiredMessage: '', //optional, if required is set to true, this is used as the empty error message (instead of the default)
infohelp: '', //optional, help text for the field, which is shown via a tooltip for an info icon, does not apply to type=html||button
prehelptext: '', //optional, help text for the field which is always displayed, in front of the field
posthelptext: '', //optional, help text for the field which is always displayed, after the field
validators: {}, //optional, a validator object. see: http://formvalidation.io/validators/, ex: validators: {creditCard: {message: 'Invalid cc value'}}
//when required is true or validationtype is used or type is set to daterangepicker||datetimepicker, validators are auto-generated for you,
//but any validators that you specify here will override the auto-generated ones
validationtype: 'Phone', //optional, enum: ['Phone', 'Email', 'URL','PostalCode'], if specified, this will automatically set the proper validators object
//NOTE: if type:'phone' or type:'email' then validationtype is not necessary
validationMessage: '', //optional, when validationtype is used or type is set to daterangepicker||datetimepicker, this can be specified to override the default error message
options: {}, //optional, a raw javascript object,
//when type=daterangepicker||multiselect||datetimepicker OR validationtype=Phone, this is passed into the jquery constructor for the field
//see http://davidstutz.github.io/bootstrap-multiselect/
//see http://www.daterangepicker.com/
//see http://eonasdan.github.io/bootstrap-datetimepicker/
//see https://github.com/jackocnr/intl-tel-input/tree/v7.1.0#options
value: '', //optional, the value or content of this field
html: '', //optional, the html content, only applies when type=html
disabled: false, //optional, defaults to false, only applies to fields that can be disabled
placeholder: '', //optional, a placeholder string for input fields, doesn't apply if validationtype=Phone
choices: [{text: '', value: ''}], //required when type=radio||checkbox||dropdown||multiselect, an array of text/value pairs, text is required, but value is not (defaults to text)
multiple: false, //optional, defaults to false, only applies when type=multiselect, determines if multiple selection is allowed
cols: '50', //optional, when type=textarea this specifies the cols attribute
rows: '10', //optional, when type=textarea this specifies the rows attribute
glyphicon: '', //optional, a glyphicon class (ex: glyphicon-minus), when type=button this can be set to add an icon to the button, when type=datetimepicker this can be set to override the default calendar icon
onclick: function(){}, //optional, when type=button this specifies an onclick function
htmlAttr: {}, //optional, when type=text||password||textarea||number this can be used to pass a set of html attributes, which will be set on the input element using jquery's attr method
bindTo: 'fieldname' //this is only available when using CotForm, specify the name or path of a field to bind to, this is not supported if type is 'html', 'button', or 'static'
}
]
},
{
grid: {
id: 'grid', //an id for the grid
add: true, //appears to not be in use
title: 'grid title', //a title for the grid
headers: [ //an array of objects with title values, for the grid column headings
{title: 'Heading 1'},
{title: 'Heading 2'}
],
fields: [ //an array of fields within the current grid
{
//the other properties in here are the same as the ones as listed just above
}
]
}
}
]
}
]
}
Page Tree