jQuery - JavaScript regex allow only numeric and minus sign as first character

Question

I want users to enter numeric values only in my input hence I put below code.

<input type="text" class="form-control rounded-pill bg-light" autocomplete="off" name="free_credit_amount" id="free_credit_amount" placeholder="Free credit amount">

$('body').on('keyup', '#free_credit_amount', function(){
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

This is working fine for me .. however I have a requirement that, users can enter negative values as well .. something like -500 , hence I have updated my JavaScript Regex a bit with something like following ..

$('body').on('keyup', '#free_credit_amount', function(){   
   this.value = this.value.replace(/[^-0-9]/g,'');
});

This is also working fine for me as I am able to type minus (-) sign and can enter a value something like 500 or -500 however, I want to furnish this regex a bit .. Currently what is happening, I can also enter a value like 500-. This should not be allowed .. I only want my minus (-) to be only added as first character..

I have tried to use various other REGEX like this.value = this.value.replace(/(\+|\-)?[^-0-9]/g,''); this.value = this.value.replace(/^[-][a-zA-Z0-9.,$;]/g,'');

But none of those REGEX working for me ..

Can someone help me to achieve this plz ..

Thanks

Try this.value.replace(/[^-0-9]+/g,'').replace(/^(-)|-+/g,'$1') — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Aug 26, 2020 at 12:59
The problem with this kind of interference with the user input, is that the user may get the impression that their keyboard is broken. They also wonder why sometimes the caret, which they had moved to the start of the input, suddenly moves to the end. This is not user-friendly at all. — trincot
– trincot, Commented Aug 26, 2020 at 14:00

Wiktor Stribiżew · Accepted Answer · 2020-08-26 17:55:18Z

5

You can use

$('body').on('input', '#free_credit_amount', function(){
    var position = this.selectionStart;
    var oldval = this.value;
    var newval = this.value.replace(/[^0-9.-]/g, '').replace(/^(-)|-+/g,'$1').replace(/^([^.]*\.)|\.+/g, '$1');
    this.value = newval;
    if (oldval != newval) {
        this.selectionEnd = position-1;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control rounded-pill bg-light" autocomplete="off" name="free_credit_amount" id="free_credit_amount" placeholder="Free credit amount">

Here,

.replace(/[^0-9.-]/g, '') - removes all chars other than digits, dots and hyphens
.replace(/^(-)|-+/g,'$1') - keeps the hyphen at the start of the string and removes all other hyphens
.replace(/^([^.]*\.)|\.+/g, '$1') - keeps any amount of text other than . and the first ., and removes all other dots in the string

edited Aug 26, 2020 at 17:55

answered Aug 26, 2020 at 17:12

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mittul At TechnoBrave Over a year ago

Magnificent .. Thank you .. Worked like a charm.

renzol · Accepted Answer · 2024-09-11 10:22:26Z

0

A little variant to allow plus (+) as well as minus (-) at the beginning, and also to allow comma (,) instead of period (.) for decimal separator, for internationalization:

this.value = this.value.replace(/[^0-9+\-,.]/g, '').replace(/^([-+])|[-+]+/g, '$1').replace(/^([^.,]*[.,])|[.,]+/g, '$1')

This would allow:

-3,8

+2.56

.41

-,67

+.801

But it won't allow:

4,556,899 (too many commas)

3.457,45 (only 1 period or comma but not both)

In other words, it fits to represent (signed) decimal numbers (or integers), not amounts with thousand separator nor currency sign ($€£...).

edited Sep 11, 2024 at 10:22

answered Sep 11, 2024 at 8:30

renzol

1832 silver badges9 bronze badges

Collectives™ on Stack Overflow

jQuery - JavaScript regex allow only numeric and minus sign as first character

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related