Standard components / NumericFormField

Try a working example of NumericFormFieldComponent and then see the code for the example.

The purpose of this component is prevent user - in real time - from entering anything but numbers (integers or float) into the text field. This component DOES NOT provide any validations by default. You may still use standard component validations provided by Webface, to, say, show validation error messages below the field if the value entered is more or less than a certain number. However, you could do pretty much the same with a regular text field represented by FormFieldComponent. They key advantage of this component is that it literally prevents users from entering anything but numbers or decimal point.

This is what it looks like:

So what happens in the example above, as soon as user attempts to type something wrong, the component immediately rewrites the value reverts to the previous value.

Settings

There are several attributes that affect how this component behaves. Those attributes, can, of course, be set either through html or programmatically in Javascript with the usual Component.set() method.

  • max_integer_length - affects the length of the integer part (the part before the decimal point). If the initial value of the component was 12.012345. Then when max_integer_length is set to 2, an attempt to enter 123.012345 will result in the value being reverted to 12.012345.
  • max_decimal_length - affects the length of the part after the decimal point. If the initial value of the component was 123.01. Then when max_decimal_length is set to 2, an attempt to enter 123.012345 will result in the value being reverted to 123.01.
  • max_length - affects the total length of the value, including the decimal point itself. If the initial value of the component was 123.1. Then when max_length is set to 5, an attempt to enter 123.01 or 1234.1 will result in the value being reverted to 123.1.