Formatting

VGS Collect.js masked input

Serializers

Use serializers to change the format of the data being sent to the server.

Examples:

Replace value

form.field('#space-for-my-field', {
    serializers: [{ name: 'replace', options: { old:' ', new:'-' }}],
    serializers: [{ name: 'replace', options: { old:' ', new:'-', count: '2' }}]
});

Expiration date separator

form.field('#space-for-my-field', {
    serializers: [{ name: 'separate', options: { monthName: 'month', yearName: 'year' }}]
});

Convert to base64

form.field('#space-for-my-field', {
    type: 'file'
    serializers: [{ name: 'toBase64'}]
});

• .field()

• Reference Documentation

Custom masking

An input mask refers to a string expression, defined by a developer, that constrains user input. This method is available for those types of fields: text, textarea, password, zip-code.

Example:

f.field('#ssn .field-space', {}).mask('999-99-9999', '*');

f.field('#random-mask .field-space', {}).mask('XXXXX', null, {'X': '[0-9]'});

• .mask()

• Reference Documentation

Define string replace pattern

Method returns a new string with some or all matches of a pattern replaced by a replacement. This method is available for those types of fields: text, textarea, password, zip-code.

Example:

f.field('#letters-only .field-space', {}).replacePattern('/[^a-zA-Z\s]+/g');

f.field('#numeric-only .field-space', {}).replacePattern('/[^\d]+/g');

• .mask()

• Reference Documentation

More examples

• Control expiration date year length

• Separate month and year for the card expiration date field

• Change expiration date separator