HTML Input field pattern for numerical values.

Question

I have an input field that I am using to get a monetary amount from a user. I am using a jQuery Money Mask function to put a mask over the user's input. So for example if the user types "100000" it will show in the input field as "$ 1,000.00". The issue is that I have a pattern setup for the input field to restrict it to only numerical values. I need to modify this regular expression (pattern="[0-9]*") so that it accepts monetary strings. Any help is most appreciated!

Code for the input field:

<input name="rentPayment[paymentAmount]" id="paymentAmount" placeholder="0.00" value="" type="text" pattern="[0-9]*">

Answer 1

I am not familiar with JQuery Money Mask but if all you need is regex then following should be enough to allow monetary values.

pattern="[0-9$,.]*" - would allow 0-9 dollar sign, comma and period zero or more times.

Answer 2

How about:

\$(\d(,?\d+)*)+(\.\d+)?

This will support:

$324234.23423
$3,242,343
$3,242.4234
$3242

But I wouldn't suggest this approach, since it will depend on the user's localisation, and it also has a dependency on the plugin - which is really just masking the user's input. I would prefer to validate the user's string as you have done, and let the masking plugin do it's work of prettifying. So you need to do your validation before the plugin takes place.

A feasible solution for this would be to leave the validation field blank - Money Mask will be validating for you, so you don't need an external pattern to do further validation in this case.