Only allow numeric values as text input (Interactive Grid #3)

As already said, we share some interesting tips and tricks with you that have helped us again and again in  developments.

Let's start with the third tip :-) 

#3 Only allow numeric values as text input

If data is to be edited in the Interactive Grid, it can be helpful to use functions to check the input before inserting or updating. Normally this can be done with validations. But why should the user be given the opportunity to enter incorrect data? For example, when entering numerical values, you can directly exclude the possibility of entering letters or special characters. For this we only need a few lines of code and save ourselves a lot of trouble or the user unnecessary error messages.

For the implementation we create a jQuery validation that is executed on page load. So in the JavaScript Execute when Page Loads Code Editor, enter the following code:

$(".only-numeric").bind("keypress", function (e) {

    var keyCode = e.which ? e.which : e.keyCode               

    if (!(keyCode >= 48 && keyCode <= 57)) {

      return false;

    }else{

      return true;

    }

});

Then specify the css class "only-numeric" for all affected columns.

From now on only numeric values can be entered into the cell via keyboard :-)

Optional:

If you need decimal places, use this code so that you can also write an dot in the field.

$(".only-numeric").bind("keypress", function (e) {

    var keyCode = e.which ? e.which : e.keyCode               

    if (!(keyCode >= 48 && keyCode <= 57) && !(keyCode == 46)) {

      return false;

    }else{

    }

});

We hope the tips and tricks will help you. If you have questions or suggestions, please leave us a comment ;-)

And here is the demo app.