Formatting

'VGS Collect.js masked input'

Serializers

It is used to change the format of the data being sent to the server.

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

There are two types of serializers:

  • replace - returns a new string with some or all matches of an old value replaced by the new value.
{ name: "replace", options: { old:" ", new:"-", count: "2" }}
old - string is to be replaced with new value.
new - string that replaces the specified substring.
count - optional, defines how many times a certain string should be replaced.
  • separate - split expiration date month and year as 2 separate values.
{name: "separate", options: {monthName: '<custom-name>', yearName: '<custom-name>'}}
monthName - expiration date month field name you would like to define.
yearName - expiration date year field name you would like to define.

Examples:

form.field('#space-for-my-field', {
    // 4111 1111 1111 1111 -> 4111-1111-1111-1111
    serializers: '[{ name:"replace", options: { old:" ", new:"-" }}]',

    // 4111 1111 1111 1111 -> 4111-1111-1111 1111
    serializers: '[{ name:"replace", options: { old:" ", new:"-", count: "2" }}]',
});
// "card.expirationDateCustom": {
//       "month": "04",
//       "year": "20"
//  }
form.field('#space-for-my-field', {
    serializers: [{ name: "separate", options: { monthName: 'month', yearName: 'year' }}],
});

Custom masking

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

field.mask(mask, maskChar, formatChar);
mask String
mask string. Default format characters are: 9: [0-9], a: [A-Za-z], *: [A-Za-z0-9].
maskChar String
character to cover unfilled parts of the mask. By default - null.
formatChar Object
defines format characters with characters as keys and corresponding RegExp strings as a value.

Example:

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

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

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 type of the fields: text, textarea, password, zip-code.

field.replacePattern(regExpString, newSubStr);
regExpString String
a RegExp object or literal. The match or matches are replaced with newSubStr.
newSubStr String
the string that replaces the substring specified by the regExp. By default - empty string.

Example:

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

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

Control expiration date year length

By default expiration date format is - MM/YYYY. If you want to change the length of the year from 4 to 2 digits, just simply set yearLength param to 2.

Example:

f.field("#expiration-date .field-space", { yearLength: 2 });