Guide on implementing validation for currency on input field with regular expression

Review the form below:

<form>
<input type="text" value="" placeholder="Enter no. of employee" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/>
<input type="text" value="" placeholder="Enter Salary" required/>
<input type="submit"/>
</form>

I am looking for a regular expression validation specifically for the Enter salary text field with the following criteria:

  • The salary should be in the format of separated by commas like this: 1,00,000

  • It should only accept numerical input, similar to the behavior of the "Enter no. of employee" field.

htmljquerycssformsvalidation

Answer №1

If you're looking to format salary inputs, consider the following:

  • Salaries should be entered with commas in this format: 1,00,000

  • Only numbers should be accepted as input, similar to the "Enter no. of employee" field.

<form>
  <input type="text" value="" placeholder="Enter no. of employee" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/>
  <input type="text" value="" onkeyup="this.value = this.value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');" placeholder="Enter Salary" required/>
  <input type="submit" />
</form>

Answer №2

Here is the solution to resolve my issue:

Indian currency formatting:

onkeyup="this.value = this.value.replace(/\D/g, '').replace(/\B(?=(?:(\d\d)+(\d)(?!\d))+(?!\d))/g, ',');"

US Currency formatting:

onkeyup="this.value = this.value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');"

Effective implementation:

<form>
    <input type="text" value="" placeholder="Enter number of employees" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/>
    <input type="text" value="" placeholder="Enter Salary" onkeyup="this.value = this.value.replace(/\D/g, '').replace(/\B(?=(?:(\d\d)+(\d)(?!\d))+(?!\d))/g, ',');" placeholder="Enter Salary" required/>
    <input type="submit"/>
    </form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating existing CSS styles into a new CSS file

I'm a little confused by the title, so let me clarify with an example. Let's say I have the following CSS code inside a file: #container_1 { width:50%; border:1px solid black; } #container_2 { background-color:red; padding:5px; ...

css

What is the best way to dynamically validate the fields and generate an array?

Currently in my Angular application, I've successfully implemented a pivot table using pivot.js. Now, I am faced with the task of loading all the indexes from elastic search whenever the user switches the index. Once the index is changed, the corresp ...

javascriptarraysangularjshtml

Is there a reason why I can't load all Google charts on one webpage?

I am trying to use the Google Charts API to display various charts on my web page. However, I seem to be encountering an issue where the last chart is not loading correctly. Can someone point out what I might be missing in my code? I would greatly apprecia ...

javascripthtmljavascript-objectsdom-eventsgoogle-visualization

Accessing a JSON array in PHP to retrieve a specific value

I am working with a JSON array that I received from an API. Specifically, I am trying to extract the "value" and "value_high" fields from the JSON related to the Mann Co Supply Crate Key. While I was able to create a script that retrieves the values store ...

phphtmljson

The submission of an Angular form results in errors such as being unavailable or

After building a registration page component in Angular and following tutorials, I encountered a frustrating bug. When pressing the submit button on the form, the console would display "undefined" when attempting to access the NgForm's value. However, ...

javascriptangularforms

Sending images from jQuery to Node.js server

Seeking assistance with uploading a file from an Android application to node.js using Express and jQuery. Here is the client-side code snippet: function uploadData(win) { var padI = imagedata.length-1 while( '=' == imagedata[pad ...

androidnode.jsjquery

Tips for placing a button on top of a Div element with overflow set to hidden?

My goal is to have a button placed over a box, but I am facing difficulty achieving this. I have experimented with z-index, grid-content, and other methods, but the button refuses to show over the box as desired. The placement of the button inside the box ...

htmlcss

When an anchor tag is embedded within a string response, ReactJS fails to render it as a clickable link

I am in the process of transitioning our code from Freemarker to React JS and I am encountering an issue with rendering anchor tags from a JSON string response. When I display this string in my React JS application, the anchor tags are appearing as plain t ...

javascripthtmlreactjsnext.js

Creating an HTML template in an Angular service and utilizing it as an HTMLTemplateRef

I'm currently working on a major project that has a specific requirement. As part of this project, I am utilizing a library which allows me to open dialog (modal) popups. In order to do so, I need to configure some options for the modal opening proce ...

htmlangulartemplatesservice

Cease processing ajax requests on the server side

After conducting thorough research on the topic of canceling ajax requests, I have come across several threads discussing this matter. One particular thread caught my attention: Abort Ajax requests using jQuery The post explains how when you use the abor ...

jqueryajaxjsf

Hide offcanvas menu upon clicking on anchor links

Issue arose when the offcanvas menu remained open after clicking an anchor link. To resolve this, I implemented the following code for an onclick event: function close_offcanvas() { var element1 = document.getElementById("eff_nav_toggler&q ...

htmlbootstrap-5

What is the process for applying a class in jQuery to empty HTML elements?

Working on a WordPress/PHP website and looking to dynamically add a class when child elements are empty? This is the HTML structure: <div class="featured-block"> <a href="/" class="featured-block__item cf"> <div class="featured-bl ...

javascriptjqueryhtml

Angular routes cause a glitch in the Bootstrap navbar, causing it to shift to the left on certain active

Apologies for the simple question, I am new to web design and couldn't find a solution even after extensive googling and searching. The issue I am facing is that when clicking on "EX5" or "EX6" in my navbar, it shifts to the left side of the screen i ...

javascripthtmlcssangularjsbootstrap-4

Troubleshooting a problem with CSS Matrix animations

Lately, I've been working on creating some matrix animations. However, I noticed an unusual issue. The code below seems to function differently across Firefox, Safari, and Chrome: @-moz-keyframes matrix { from { -moz-transform: matri ...

cssmatrix

Retrieve data from a JSON object within an HTML document

How do I display only the value 100 in the following div? <div> {{uploadProgress | async | json}} </div> The current displayed value is: [ { "filename": "Mailman-Linux.jpg", "progress": 100 } ] Here is my .ts file interface: interface IU ...

htmlangulartypescript

Getting the local path of a file from an input file in Angular 7

Is there a way to retrieve the local file path from an input field in HTML? After running the code below, I obtained 'C:\fakepath\fileTest.txt' I am looking for a method to get the local path so that I can pass it on to my control ...

htmlangulartypescriptangular7

Searching for a specific text within an element using XPATH in C# with the Selenium framework

My current challenge involves locating specific text within certain elements on an HTML page. <a class="ProductCard-link ProductCard-content" target="_self" tabindex="0" href="/en/product/puma-future-rider-menshoes/314 ...

htmlseleniumxpath

"Using the power of jQuery to enhance the loading of Google Chrome

When attempting to load jQuery in the manifest's content_scripts, I encounter an issue where a dropdown stops working on a page that already has jQuery loaded. Despite checking the console log for errors, I am unable to pinpoint the issue. Removing jQ ...

jquerygoogle-chromegoogle-chrome-extension

AngularJS navigates to specific URL paths instead of only displaying the corresponding HTML pages

Building a simple AngularJS application using the angular-seed starter template consists of: index.html app.js home/home.html home/home.js My objective is to navigate to home.html when clicking on the Home li item with the href="/home". However, the cur ...

javascripthtmlangularjsnode.jsangularjs-routing

What could be causing the Javascript Dynamic HTML5 Table to not display on the page?

I have a program that calculates the total price of products based on a specified quantity and updates an HTML table with these values. To demonstrate this, I am constantly taking input using an infinite loop. <!DOCTYPE html> <html> ...

javascripthtml