Enable/Disable Input Mask Validation on Text Box Fields

I'm familiar with input masking from my programming background. And, I've read your tutorial, "Getting Started with the Basics of Input Masking". I've successfully created phone number masks in my forms. However, I'm having trouble with currency masks and/or validation!

I set "Properties|Validation" to "Currency" in my Investors Interview Form (see page 2). And, I created the following mask, "$###,###,###.00". However, I keep getting the following errors in Preview mode:

     "Field value must fill field"; or,

     "This field can only contain currency values".

I experimented with swapping the "#" characters in the mask with "@", and with "*" (neither of which mask for currency). Yet, no matter how I mask the input fields, I still get these same errors.

I also notice that the input masks seem to work with Properties|Validation set to None rather than Currency. But, I have to insert leading zeros as placeholders for any currency value with fewer than the full 9-digit mask.

I also notice that when I remove the Input Mask (leaving the Validation tool set to Currency), I can enter any string of numbers and it validates as currency without currency symbols, commas or periods! Either I don't understand how these input masks and validation work, or there's a bug in the system. Any suggestion to help me get these fields working would be greatly appreciated.

Thanks for your help!

This error is triggered because of the unfilled mask when currency validation is enabled.

When I fill them, it worked as expected.

I set the validation to none too and it is working when masks are filled.

I am also getting the other error when there's no currency validation. This is probably because the mask requires a real value.

Take note that the currency symbol allows digits, commas, period and a currency symbol e.g. $. So if you are going to enter digits without the currency symbol, it'd still work.

I suggest you use the masked input widget. This has special options for the currency input.

Hope this helps!

Elton -

I hear what you're saying about the "This field can only contain currency values" error. However, with Currency validation set (and Mask off), I can enter less than 9 digits in the mask and still not get an error (see Example 2 and first screenshot, below). I can also enter non-monetary numeric groupings without error (see first screenshot). And, with both Currency validation and Mask set to On, I have to enter all 9 digits, and cannot have leading spaces, as you discovered (see second screenshot, below). But, that's not realistic. I can't expect people to enter a bunch of zeros before they enter their real numbers.

I included the various tests I ran so you can see the results I'm getting. I tried every combination of "Currency" validation and currency Mask (see Examples 1-4, below). But, I'm still not convinced whether or not either are working as they should!?! I suspect not.

Also, are you recommending that I use the "Masked Input" widget instead of the combination of Validation and Mask I've been trying to use? I assume (you think) it works better, without the issues I've been having?

Text Input Field | Properties Settings:

>>  Validation - "Currency"
>>  Mask - "$###,###,###.00"
>>  Currency symbols - dollar sign, commas, periods

Example 1

Validation - None

Mask - Off, no currency symbols

* no errors for any alphanumeric input

Example 2

Validation - Currency

Mask - Off, no currency symbols

* monetary symbols without error
* non-monetary numerical sequences accepted without error, including spaces
* errors for any alphabetic character

Example 3

Validation - Currency

Mask - On, currency symbols in mask

* errors for any alphabetic entries
* monetary symbols accepted without error
* must enter all 9 digits; leading spaces not accepted for small amounts, have to enter zeros (see screenshot)

Example 4

validation - None

mask - On, currency symbols in mask

* alphabetic characters cannot be entered
* leading spaces accepted for small amounts, no need to enter zeros
* trailing zeros also accepted (non-monetary number groupings)

Screenshot #1

Screenshot #2

Text box with no validation has constant "mask validation" check. This means, input mask will force an actual value, therefore, you can't leave the defined masked empty. Otherwise, it would trigger an error. This is also the reason why you are getting errors with currency validation because unfilled mask (underscores) is included on currency validation checks. We have an option in the previous version of the form builder where you can disable "mask validation", this allows the users to ignore the unfilled masks so I will forward this as a feature request. You'll be informed here once this is implemented.

With regards to your examples, here are the results based on my tests.

Example 2, This worked fine for me. I am getting the error on spaces.

Example 3, With its current settings, all masks should be filled, otherwise, you will get an error.

Example 4, I can reproduce this error. I will submit this to our developers for further investigation.

Here's my test form: https://form.jotformpro.com/72636914952970

I am suggesting the widget as an alternative solution since the currency validation along with the input mask option does not currently meet your requirements.

Thanks

Elton -

Thanks for your detailed response. I look forward to your backend developers fixing what seems to be some programming errors in the Validation and Mask features of the Text Input element.

I added the "Masked Input" widget to my "Investor Interview Form", as you suggest. (See 2nd element at the top of the "Investment Strategy" section, pg.2.) I like the way it automatically adds the Prefix, thousands separator and decimal separator to a string of random numbers, and prevents alphabetic and symbol characters. However, I'm not sure how to add a limiting mask and have it retain those same user-friendly capabilities!?!

I don't want my users to enter cents, or dollar amounts less than $1,000.  But, when I tested the following mask, "999,999,000.00", I got similar results to the previous method I tried using Validation: Currency, and the currency Mask.

For any number amount with fewer than 6 digits, the currency mask doesn't kick in, which defeats the purpose of the widget. Like the previous "Currency/Mask" Properties method, it seems you have to fill the entire mask, which defeats the purpose of this widget. And, it can create a non-U.S. numeric sequence for currency values with more than three digits, but less than six. (Six digits being the number of available slots, and three being the minimum number of digits before a coma separator kicks in.) It seems the problem is that the numbers are filled from left to right in the field, which is backwards for U.S. currency. And, it doesn't reformat whatever has been entered in the field once focus changes to another element.

So, is there a way to make this work the way I want?

The Custom Pattern setting in the widget allows you to set a digit limit in the input. If you put Four 9s, that means you can only add up to 4 numbers. 

If you want to include the decimal, just put 9999.99.

Unfortunately, there is no option in the input masked widget to set a limit in terms of the amount. 

The currency symbol will appear as soon as you type the digits. Isn't this the case to your end? Note that if you will set a custom pattern, it overrides everything below it. This means that you have to add the currency in your custom pattern rule.

Example:

I hope that helps.

Welvin -

In your first example, if you put (4) 9s in the mask, users must enter (4) digits whether they want to or not; one for each of the placeholders. They can't enter fewer than 4 digits without an error. That's a problem! There are times when you need to require an exact number of digits, as in credit card or social security numbers. But, there's also a need to enter a range of numbers including those with fewer digits than the number of placeholders in the mask.

The ability to auto-format a user's numerical entry, and have it fit the form's presets is the beauty of this widget. Instead, the mask limits the range to only numbers with (4) digits (using your example), rather than validating all numbers between (1) and (4) digits. If a user wants to enter a number smaller than (4) digits, they have to precede their entry with leading zeros to prevent errors, which is impractical!

The default setting (without an optional mask) allows the widget to accept any number of digits the user enters, and format them accordingly. That's just what I want. But, I need to do both. I also need to force users to "round to the nearest hundred", which requires an optional mask. And, it seems the ability to do both is missing in this widget!

Example: if I enter sufficient 9s in my mask to allow for a $100,000.00 entry, I'd use the following mask: the "$" prefix, (3) "9s", a coma, and "000.00" to force my entry scheme requiring users to round to the nearest hundred. But, users can't enter $50,000.00" in this case without an error. Instead, they'd have to enter "$050,000.00" to fill the entire mask.

I do not think that we offer any option that will auto-format the input in a currency format and also round it to the nearest hundred.

Elton has added a feature request ticket to see if the incomplete Input Mask can be allowed. There is no ETA for when it will be implemented, but we will let you know if we have any updates on this.

If you need some custom validation you may consider getting the form source code to be able to add your own code. The modified code should be hosted elsewhere in this case.