CODEWITHSUNDEEP
javascriptjqueryregex
Enrico
Enrico

Reputation: 3454

Some parts of my regular expression not working

I'm trying to use a regular expression to validate the input on a textbox

The expression should allow only numbers, maxmium two decimals, max one comma (,) and one minus symbol in front of the number (optional).

Valid:

invalid:

I'm using ^[-+]?[\d ]+(,\d{0,2})?$ The regex is used in a Jquery code to prevent the user from entering invalid numbers (event.preventDefault()):

    $("input[name*='TB_mytbx']").on('keypress', function (event) {
        var regex = new RegExp("^[-+]?[\d ]+(,\d{0,2})?$", "g");
        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!regex.test(key)) {
            event.preventDefault();
            return false;
        }
    });

Only a part of the regular expression seems to work.

It works with numbers (It does not allow me to enter letters) but it also won't allow commas (,) and the minus (-).

What am I doing wrong?

Edit

Before I used:

    if (focused.val().indexOf(',') != -1) {
    var number = (focused.val().split(','));
    if (number[1] && number[1].length >= 2) {
        event.preventDefault();
        return;
    }

But this gives annoying behavior. As soon as you enter a number with two digits you can't make edits anymore. For example: you can't change 200,50 to 300,50 or 100 300,50. (You get the point). I hoped that a regex could change that somehow.

Upvotes: 1

Views: 140

Answers (2)

Enrico
Enrico

Reputation: 3454

For those of you who wanna know, I solved it using this code

        $("input[name*='mythingy']").on('keypress', function (event) {
        var theEvent = event || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var value = this.value;
        var value = value.replace(value.substring(theEvent.currentTarget.selectionStart, theEvent.currentTarget.selectionEnd), "");
        value = [value.slice(0, theEvent.currentTarget.selectionStart), key, value.slice(theEvent.currentTarget.selectionStart)].join('');
        var regex = /^[-+]?([\d ]+(,\d{0,2})?)?$/;
        if (!regex.test(value)) {
            theEvent.returnValue = false;
            if (theEvent.preventDefault) theEvent.preventDefault();
        }
    });

Upvotes: 0

Cerbrus
Cerbrus

Reputation: 72857

I think you're massively over-complicating the regex. This should be plenty:

^-?\d+(,\d\d)?$
  • ^ Start of line,
  • -? Optional minus sign,
  • \d+ Followed by a bunch of digits,
  • (,\d\d)? Followed by a comma and 2 digits, which are all 3 optional.
    (alternative: (,\d{2})?)
  • $ End of line.

var regex = /^-?\d+(,\d\d)?$/;

console.log(regex.test('0,25'));
console.log(regex.test('-175,33'));
console.log(regex.test('15555555555555,99'));

console.log(regex.test('9,999'));
console.log(regex.test('15.03'));
console.log(regex.test('77,77,77'));

There you have a regex to validate the input value.
Now, that block of code can be replaced with this:

$("input[name*='TB_mytbx']").on('keypress', function (event) {
    var regex = /^-?\d+(,\d\d)?$/;
    var value = $(this).val();  // Use the field's value, instead of the pressed key.

    if (!regex.test(value)) {
        event.preventDefault();
        return false;
    }
});

Upvotes: 2

Related Questions