/

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: [...],
});
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format

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" }}
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format

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>'}}
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format

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', {
    serializers: [{ name: "replace", options: { old:" ", new:"-" }}],
    serializers: [{ name: "replace", options: { old:" ", new:"-", count: "2" }}]
});
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format

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);
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format

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]'});
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format

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);
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format

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');
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format

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' });
This is a sample VGS echo server
This is a login from access credentials
This is a password from access credentials
This is a HTTP port number to access
This is a  sample VGS alias  in a generic format
This is a sample test  vault id
This is a username/password pair of  access credentials  for a sample test vault
This is a sample  vault url, that contains the vault id and the sandbox environment
This is a sample  vault host,  which contains sample test vault id and sandbox environment
This is a current Organization ID
This is a current vault id
The unique name that identifies a specific iframe
This is a  sample VGS alias  in a generic format

Playgrounds