Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567



Amount Validator JS [Snippets] – DZone Web Dev

I have been working on Fintech projects for a long time. While working with business people I have realized that they want to see financial items in a proper business format. One of the most common requirements is they want to input amounts filed in a business format (like comma-separated amounts field by only allowing two decimal points, etc).

I have searched a lot on the internet and didn’t there any complete article or guideline to validate and take input of the amount field properly, and finance clients always want to input/type the amount field in a way where the user can feel that he/she is inputting/typing an amount, not a number or anything else.

After realizing this I have decided to write a JavaScript where basic amount validations and auto formats are there. I tried to make it so simple so that other developers can easily implement this on their projects by following only a few steps.

It works properly/perfectly on web browsers but it has some issues on mobile browsers.

Here is the demo URL: https://nubnasir.github.io/amount-input-field-js/.

When you type your amount it just starts to convert your value to amount on the fly. 

You can also copy-paste any text to convert it to an amount. Like if you copy and paste something like  “200 dollars 300 dollars ext”. This will change to “200,300”.

There are two ways to implement this.

Way 1 (With amount Class)

Step 1: Download amount-2.0.min.js — click here to download.

Step 2: Add amount-2.0.min.js at the end of the page:

<script type="text/javascript" src="https://dzone.com/articles/amount-2.0.min.js"></script>

Step 3: In the amount input field add the class amount.

Way 2 (With your_custom_class_name)

Step 1: Download amount-2.0.min.js — click here to download.

Step 2: Add amount-2.0.min.js at page <head> tag:

<script type="text/javascript" src="https://dzone.com/articles/amount-2.0.min.js"></script>

Step 3: Add a custom class in your input field your_custom_class_name. At the end of the page use function apply_amount and pass your_custom_class_name:

<script type="text/javascript">

Credit: Source link

Previous Next
Test Caption
Test Description goes like this