Form

Form

Members

config :object

Source:
Properties:
Name Type Description
action string

URL for form submission.
attributes object

Key-value pairs for attributes in

element. Use empty string if the attribute has no value, null to unset the attribute. E.g.: { enctype: 'multipart/form-data', novalidate: '', required: null } will produce <form enctype="multipart/form-data" novalidate>.
classes Array.<string>

List of CSS classes for <form> element.
formTemplate string

Mustache.js template for rendering HTML for element.
errorsTemplate string

Mustache.js template for rendering array of error messages for each field. It may be overridden in field config. For simplicity, the classes are embedded in the template instead of having an errorClasses key.
inputTemplates object

Key-value pairs where key is input type (e.g. text, select) and value is Mustache.js template for rendering HTML for input element. The appropriate input template is used when rendering the input for a field and may be overridden in field config. For dropdowns/checkboxes/radio buttons, the following template variables are available: hasSelectedOption (indicates if an option is selected), emptyOptionText (the text for the option with empty value), selectedOptionText (the text for the selected option if any) and options (an array of objects, each having the keys optionValue, optionText and optionSelected).
method string

HTTP method for form submission.
name string

Form name.
requiredText string

Text to return for error message if value is empty for required fields. Can be overridden in field config.

Configuration defaults for form.

Type:
  • object

fields :Map.<string, Fieldset>

Source:

Fields.

Key is fieldset name, value is Field object. Uses Map instead of Object/Array so that rendering order can be guaranteed by insertion order and specific fields can be referenced easily by name instead of looping each time, e.g. fields.get('myfield').

Name is made optional in the Field object to reduce repetitions, e.g. field.set('myfield', new Field({})) instead of field.set('myfield', new Field({ name:'myfield' })). It is also becos the name of the field is dependent on the form that it is used in.

Type:

fieldsets :Map.<string, Fieldset>

Source:

Groups of fields, with each group rendered as a <fieldset> element.

Key is fieldset name, value is Fieldset object. Uses Map instead of Object/Array so that rendering order can be guaranteed by insertion order and specific fieldsets can be referenced easily by name instead of looping each time, e.g. fieldsets.get('myfieldset').

Name is made optional in the Fieldset object to reduce repetitions, e.g. fieldsets.set('myset', new Fieldset({})) instead of fieldsets.set('myset', new Fieldset({ name:'myset' })). It is also becos the name of the fieldset is dependent on the form that it is used in.

If at least one fieldset is specified, any fields not belonging to a fieldset will not be rendered.

Type:

Methods

(static) new Form(config) → {Form}

Source:

Constructor.

Parameters:
Name Type Description
config object

Form configuration. See Form.prototype.config.
Returns:
Type
Form

clearData() → {void}

Source:

Clear form data.

Each field will be set to its default value as per field.config.value, not an empty string, else buttons and html type fields will lose their text.

Returns:
Type
void

getData() → {object}

Source:

Get form data.

Returns:

Key-value pairs where key is field name and value is field value. Type of value may be string, number or array (multiple values such as for multi-select checkbox group).

Type
object

render(templateVariablesopt) → {string}

Source:

Renders HTML for entire form.

Parameters:
Name Type Attributes Default Description
templateVariables null | object <optional>
 null

Optional key-value pairs that can be used to add on to or override current template variables.
Returns:
Type
string

setData(formData) → {void}

Source:

Set form data.

Parameters:
Name Type Description
formData object

Key-value pairs where key is field name and value is field value. Type of value may be string, number or array (multiple values such as for multi-select checkbox group).
Returns:
Type
void

validate(formDataopt) → {null|object}

Source:

Validate form.

Values and errors, if any, will be stored in fields after validation. This is to aid when rendering the form after validation.

The method signature allows the validation of a form submission in one line instead of having to call form.setData() each time before calling form.validate(). Example scenario in an Express app:

// If need form.setData() then code for response will be duplicated
if ('GET' === request.method
    || ('POST' === request.method && !form.validate(request.body))
) {
    response.send(mustache.render({ // Mustache.js
        viewHtml, // template
        { record: record }, // template variables
        { form_html: form.render() } // partials
    }));
}
Parameters:
Name Type Attributes Default Description
formData null | object <optional>
 null

Optional key-value pairs where the key is the field name and the value is the submitted value. If null or unspecified, current values in fields will be used for validation.
Returns:

Null returned if form is valid, else key-value pairs are returned, with key being field name and value being the error message for the field.

Type
null | object