Amount Validator and Formatter Input Field - JavaScript

Author and Developer: Md. Nasir Uddin Bhuiyan (nubnasir@gmail.com)




Key note - version 2.0

  • Allows numbers 0-9, comma (,) and dot(.)
  • Adds comma(,) automatically in exact position
  • Prevents more than two(2) decimal points
  • No extra additional library is required
  • new Mobile compatibility
  • new Filter numbers [0-9] from pasted text
  • new Easy configuration using class name amount

How to use

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="amount-2.0.min.js"></script>

Step 3 In the amount input field add 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
<head>
<script type="text/javascript" src="amount-2.0.min.js"></script>
<head>

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">
apply_amount('your_custom_class_name');
</script>


Motivation

I have been working in fintech projects from a long time. While working with business people I have realized that they want to see financial items in a proper business format. Also they want to input amounts filed in a business format (like comma separated amounts field by only allowing two decimal points, etc). On the internet there is no complete article or guideline to validate and take input of amount field properly, and finance clients always want to input the amount field in a way where the user can feel that he/she is inputting an amount not a number or anything else. After realizing this I have decided to create an amount field input field where basic amount validations and auto formats are there. This The motivation behind creating a simple js to validate an auto format amount input field.

Released version
version - 2.0 (latest)
Documentation
Release date: 5th October 2020
Download amount-2.0.min.js (latest)
src | zip | tar.gz
version - 1.0
Documentation
Release date: 2nd October 2020
Download amount-1.0.min.js
src | zip | tar.gz