SwissUpLabs Logo

Field manager

This feature supported since v.1.12.0

FieldManager component allows to change form field properties like placeholder, label, classname, apply mask/formatter. This feature could be useful to improve the look of the form, create housenumber field and other custom changes.

Here is a syntax:

], function(manager) {
    'use strict';

    manager('[field-selector]', {
        label: 'Custom Label',
        placeholder: 'Custom Placeholder',
        classname: 'fc-size-l:fc-col-6', // see
        mask: 'phone', // see
        newline: true // move the field to the newline

    manager('[field2-selector]', {
        attr: {
            'rows': 5 // works with textarea only
        validator: { // see
            'lazy': true, // run first validation on `blur` event instead of default instant validation
            'min-words': 10
        newline: 'fc-size-l fc-size-m' // move the field to the newline if parent container is large or medium

All custom js should be placed in custom.js file

There are also separate utils available for each of the property:

Util Example Usage Examples
Swissup_Firecheckout/js/utils/form-field/label label(selector, label) Housenumber
Swissup_Firecheckout/js/utils/form-field/placeholder placeholder(selector, placeholder) Housenumber
Swissup_Firecheckout/js/utils/form-field/classname classname(selector, classname) Housenumber, Change field size
Swissup_Firecheckout/js/utils/form-field/mask mask(selector, mask) Field mask, Postcode mask
Swissup_Firecheckout/js/utils/form-field/attr attr(selector, attributes) -
Swissup_Firecheckout/js/utils/form-field/validator validator(selector, rules) Validator, Housenumber
Swissup_Firecheckout/js/utils/form-field/newline newline(selector, sizes) -
Swissup_Firecheckout/js/utils/form-field/status status(selector, status) DependentFields
Next up
Edit this Page