Why isn't my regex returning the correct value for my text input?

Question

So basically, I have a large form with more than 50 text inputs.

I am applying a function via onKeyPress to all of them to make sure that they are numbers only with the use of one decimal point.

This is my regex function:

function pointAndNumbersOnly(inputString)
{
    return inputString.match(/^[0-9]*\.?[0-9]*$/);
}

This is an example of one of my text inputs:

<input type="text" pattern="\d*" class="form-main" name="priceGST" id="priceGST" placeholder="Enter GST without % sign" value="10" onkeypress="return pointAndNumbersOnly(this.id);">

What is my mistake here?

PS. I am receiving no errors in my console.

Answer 1

Let's begin with the usage of your regex, you should be doing it like this:

var inputString = document.getElementById('priceGST').value;
var regex = /^[0-9]*\.?[0-9]*$/;
var valid = regex.test(inputString);

So this should work just fine for you:

function pointAndNumbersOnly(inputString)
{
    var regex = /^[0-9]*\.?[0-9]*$/;
    var valid = regex.test(inputString);
    return valid;
}
var inputString = document.getElementById('priceGST').value;
var valid = pointAndNumbersOnly(inputString);

There are other options though:

function pointAndNumbersOnly(inputString)
{
    var regex = /^[0-9]*\.?[0-9]*$/;
    var valid = regex.exec(inputString);
    return valid;
}
var inputString = document.getElementById('priceGST').value;
var valid = pointAndNumbersOnly(inputString);

Let's make your function even better by only requiring elements to be pushed down, not their values:

function pointAndNumbersOnly(inputElement)
{
    var inputString = inputElement.value;
    var regex = /^[0-9]*\.?[0-9]*$/;
    var valid = regex.test(inputString);
    return valid;
}
var inputElement = document.getElementById('priceGST');
var valid = pointAndNumbersOnly(inputElement);

Now another matter:

Using html-attributes such as onkeypress, click, etc... is bad practice since we want to separate our HTMLand JavaScript. Besides, onkeypress is a problem maker to begin with because it doesn't always do what you think it does. It's better to use change, keyup and keydown to detect changes.

Instead of using onkeypress="return pointAndNumbersOnly(this.id);we want to use event delegation to detect changes in the dom, using our new change events:

function pointAndNumbersOnly(inputElement)
{
    var inputString = inputElement.value;
    var regex = /^[0-9]*\.?[0-9]*$/;
    var valid = regex.test(inputString);
    return valid;
}

inputElement.addEventListener("change, keyup, keydown", function(e)
{
    var inputElement = document.getElementById('priceGST'); // Makes more sense to use this
    var valid = pointAndNumbersOnly(inputElement );
    // ...
});

You can also add event listeners to a set of elements by referencing to their class.

Finally:

Make sure the JavaScript is defined AFTER your DOM is ready, that is, make sure the JavaScript is added at the bottom of your body so that the HTML exists OR you have functionality such as jQuery's .ready function, that detects when the DOM is loaded and the JavaScript within is allowed to execute, otherwise it won't know the HTML ids' such as id="priceGST".

If you define your JavaScript and try to reference HTML ids' then you'll see that they are undefined, or just null, because they don't exist at that specific point.

Answer 2

After seeing all other answers and looking into your problem I think this is what you want.

HTML:

<input type="text" pattern="\d*" class="form-main" name="priceGST" id="priceGST" placeholder="Enter GST without % sign" value="10"/>

Attach the events in JavaScript, and prevent the default behavior if the input is not valid. By using keypress event you can read the current character accurately, append it to the value that was read (which excludes the character you just typed) and then pass the validation.

JavaScript:

function isValidNumber(str) {
  return /^\d*\.?\d*$/.test(str);
}

document.getElementById('priceGST').addEventListener('keypress', function(e) {
  var char = String.fromCharCode(e.which);
  if (! isValidNumber(this.value + char)) {
    e.preventDefault();
  }
});

DEMO: http://jsbin.com/oCobAfUJ/1/edit

Answer 3

Change the way you pass the parameter to the pointAndNumbersOnly function and it should work:

onkeypress="return pointAndNumbersOnly(this.val());"

Edit: as mentioned, the above solution is JQuery. With Javascript is should be:

onkeypress="return pointAndNumbersOnly(this.value);"

Answer 4

Firstly,use onkeyup instead of onkeypress because when use onkeyup,you can get this.value as what you've just input,and onkeypress will get your input value before.

For example,the inputbox has current value 10 and you want to input 101.

onkeyup will get this.value = 101,

onkeypress will get this.value = 10.

As I will do,I will set a preValue,if the current value is invalid,set this.value to preValue.

Just like this:

//html
<input onkeyup="return pointAndNumbersOnly(this);" type="text" pattern="\d*" class="form-main" name="priceGST" id="priceGST" placeholder="Enter GST without % sign" value="10">

//js
function pointAndNumbersOnly(obj){
    var key = 'price'+obj.id;
    //.2 will be valid here. If not,use /^[0-9]+\.?[0-9]*$|^$/ instead
    if(obj.value.match(/^[0-9]*\.?[0-9]*$/) !== null) {
        window[key] = obj.value;
        return true;
    }else {
        obj.value = window[key];
        return false;
    }
}