Look into allowing for only numeric fields in the number input fields

[mollieru]

Per convo here: https://github.com/usds/enrollment/issues/218

[jaredcunha]

So, I can do this, but not as much as I'd like.

When I use type="number", it will not allow users to type letters into the input. Where this falls apart is when we have to validate against specific patterns, say, in the case of zip codes requiring five digits. I can restrict other types of numeric inputs, such as household size using min and max values. However, the zip code might have be an outlier since the lowest zip code in the US is 00501, in which case entering "501" is considered valid.

Do you have any thoughts on this?

[jaredcunha]

@mollieru, I've been digging into the rabbit hole on this one, and I think there are several ways we might want to go about tackling.

Not all numbers are created equal. Based on what browsers are able to do, and making considerations for both mobile and desktop, here's some options. If the patterns don't make sense, they determine the keyboards. The step will describe increments when the user hits the "up" arrow, but allows determines whether or not decimals are allowed.

Zip Codes:

Input type: tel Pattern: (\d{5}([\-]\d{4})?) Mobile keyboard: Telephone Desktop keyboard: Allows non-numbers Rationale: number inputs will not validate the pattern. I see getting the incorrect number of digits vs. alphabetical input being the more likely errror. Zip code will accept either a 5 digit of 5 digit + 4.

Dollar Amounts

Input type: number Pattern: none Step: 0.01 Min: 0 Mobile keyboard: extended numbers (has mathematical features, so you don't get the big telephone keypad. Desktop keyboard: Numbers, decimals, hyphens Rationale: Allow decimals since some questions ask how much one makes per hour

Household Members

Input type: number Pattern: \d* Step: 1 Min: 1 Mobile keyboard: Numeric (integers only) Desktop keyboard: Numbers, decimals, hyphens Rationale: Since includes self, can never be less than one

Shares Meals

Input type: number Pattern: \d* Step: 1 Min: 0 Mobile keyboard: Numeric (integers only) Desktop keyboard: Numbers, decimals, hyphens Rationale: Since includes self, can never be less than one

Month

Input type: number Pattern: \d* Step: 1 Min: 1 Max: 12 Mobile keyboard: Numeric (integers only) Desktop keyboard: Numbers, decimals, hyphens

Day

Input type: number Pattern: \d* Step: 1 Min: 1 Max: 31 Mobile keyboard: Numeric (integers only) Desktop keyboard: Numbers, decimals, hyphens

Year

Input type: number Pattern: \d* Step: 1 Min: 1900 Max: 2016 Mobile keyboard: Numeric (integers only) Desktop keyboard: Numbers, decimals, hyphens

Telephone Number

Input type: number Pattern: ^\(?([0-9]{3})\)?[-.]?([0-9]{3})[-.]?([0-9]{4})$ Step: 1 Min: 1 Max: 31 Mobile keyboard: Numeric (integers only) Desktop keyboard: Numbers, decimals, hyphens Rationale: see the pattern detail here. Phone numbers are not required, however, so they will not validate. Unless they need to, that is. We can always make the field required once the user begins typing and submits the form while there is content.