Limit user input for a US dollar cash amount

The other day I ran into a scenario where I needed to limit the user input within a text box to only allow a valid dollar amount. Usually you would use Regular expressions and show an error upon blur or submit of the form, but this was a specific requirement for development. Here is how we can achieve the desired result.

A few issues we will need to overcome.

1. We cannot allow any alpha characters.
2. We cannot allow any special characters.
3. Allowed characters include all digits.
4. A single instance of decimal/period (".") character.
5. The decimal/period character has to be in one of three correct locations.

Lets first create the input that we will be validating.

Just a very simple input element here with an associated label for text entry.

The next thing we need is to write some jquery to start our character limitation. Now this is where it gets kind of tricky. Lets first take a look at the code that will get us the desired result and then we can go over the purpose for each one.

Script 1. Validation of entry

Lets start by dissecting this script. During research I found that jQuery will fire the events in the following order, keyDown -> keyPress -> keyUp. While developing this the issue I saw with the other events is that they do not yield consistent results across browsers. The best case was with keypress. So the script uses the keypress event to attach a script to the input in our HTML.

Starting out in the script has some variables that will help us access and assess different scenarios. I'm going to do a brief overview for each item.

• code: retrieve the key code.
• white: allowed characters such as DEL BACKSPACE BACKARROW FORWARDARROW etc.
• chars: digits and period.
• textBox: the jQuery representation of the input element.
• theText: the value within the text box (this excludes the current character being assessed).
• atPos: this determines if we have a period/decimal already within the input.

First thing we assess is whether the entered character is within our allowed list or part of the white-list. If it passes we move on and check if the period is allowed in the current caret position. And in the last part we check and limit the user from inputting digits if they have already assigned the appropriate number of decimal places. For example once the user has typed 123.45 they will not be able to type past the five unless they delete the four.

Script 2. Get caret location with older browser support

Script two is used to determine where the current caret position is within our input field. I found this code from a stack overflow post here. The selectionStart property works in the newer browsers like chrome, firefox, and IE10, but we need to fall back to a more complicated method for the older IE browsers. I wont go into too much detail here, if you wish to know more about it you should be able to get the information from the stack overflow post.

And now we are good to go. Fire up your test page and you should see that you can only enter valid cash amounts within the input box. And if you are feeling lazy you can go to the gist here to play around.