Data privacy notice

 

When this content is loaded, usage information is transmitted to Vimeo and may be processed there.

 

             

autoNumeric (number format)

Modified on Thu, 8 Feb at 9:24 AM

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.

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 FORMCYCLE Designer and select the input field via jQuery.


Modern JavaScript (ES6)

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

Legacy JavaScript (Internet Explorer Support)

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:


Modern JavaScript (ES6)

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

Legacy JavaScript (Internet Explorer Support)

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.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article