autoNumeric (number format)

Content [ Hide ]

Example
Common options

autoNumeric is a Javascript library for working with numbers and country specific number formats. This library is already included in forms and does not have to be loaded separately. See the help pages of that library for an in-depth explanation. The following is a brief overview of this library. A example form you will find in the form store.

Making use of autoNumeric to implement different numerical formats with or without units.

Example

The input field Namen is named tfWeight. We would like it to show the unit kg and have a maximum of three decimal digits. We also want to use an English-style decimal separator (a period .).

First, we set the data type of the input field text. The library autoNumeric will handle the validation for us.

Next, we go to the JavaScript tab of the Xima® Formcycle Designer and select the input field via jQuery.

const tfWeight = $("[name='tfWeight']");

var tfWeight = $("[name='tfWeight']");

Now we initialize the autoNumeric library by calling the method jQuery.fn.autonumeric. We also pass it the options we want:

tfWeight.autoNumeric({
    aDec: '.', // Period as decimal separator
   aSep: '', // No delimiter symbol for thousands.
   aSign: ' kg', // Unit kg
   pSign: 's', // Place the unit at the end of the number (s=suffix).
   vMin: 1, // Only allow values >= 1
   vMax: 100, // Only allow values <= 100
   mDec: 3, // At most three decimal places.
   aPad: false // Do not pad to three decimal places (eg. 5.6 instead of 5.600).
})

This allows the user to enter 3.99, which will displayed as 3.99 kg. The JavaScript library autoNumeric takes care of validating the input and displaying the appropriate error messages. It also provides functions for retrieving the plain numeric value, eg. 3.99{ instead of 3.99 kg.

To retrieve the value as a plain number, use the get function:

const number = tfWeight.autoNumeric("get") // Returns the value as a number.

var number = tfWeight.autoNumeric("get") // Returns the value as a number.

Finally, you can also change the value with Javascript:

// Sets the value to 49.5. It will be shown as "49.5 kg" in the input field.
tfWeight.autoNumeric("set", 49.5);

When submitting the form, the formatted number will be sent and not the plain numeric value, eg. 49.5 kg.

Common options

autoNumeric accepts many options, all of which are optional and have got defalut values. The following are some of the most common options:

aDec: Decimal separator.
aSep: Group separator. No separator when there's an empty string. E.g. for displaying 1.234,55
dGroup: Number of digits that will be grouped. The default value is 3, which will insert a separator for each power of 1000 (10^3). For example, the number 123456 will is then formatted as 123.456
aSign: Unit. This allows any arbitrary string to be used, such as EUR, kg, °C, 粁 (kilometers), or ¥ (Japanese Yen)
pSign: Whether the unit should be placed before or after the number. Use p (prefix) to place the unit before the number, and s (suffix) to place it after the number
vMin: Minimum value. When setting this to 1, a number equal to or greater than 1 must be entered
vMax: Maximum value. When setting this to the number 100, a number equal to or less than 100 must be entered
mDec: Maximum number of decimals places

See also the documentation for the method jQuery.fn.autonumeric. These options are also described in detail on the website of autoNumeric. In addition, there is a webmask which can be configured comfortably using the above settings.