Allow Only Numbers and Decimal Using jQuery in Oracle Apex

In the previous tutorial, I have given an example to allow only integer value in a field using jQuery in Oracle Apex and in this tutorial, I will show you how to allow only numbers and decimal places (with one dot (.) only) using the jQuery in Oracle Apex. Follow these steps:

1. Add a Class to Text/Numeric Fields

Open your page in Oracle Apex and select or create an item as Number Field. Then in the Advanced section set the class allow-decimal in the CSS Classes field.

2. Specify Custom Attribute

Now for the above field, add the following JavaScript code into Custom Attributes field to format number field to 2 decimal places when the user will leave the field.

onfocusout="this.value=Number(this.value).toFixed(2)"

Suppose if you want 4 decimal places then change the code as follows:

onfocusout="this.value=Number(this.value).toFixed(4)"

Below is the screenshot for the above settings:

3. Add the jQuery Code

Add the following jQuery code to the Execute when Page Loads section for the page:

$(".allow-decimal").keypress(function (e) {
    if(e.which == 46){
        if($(this).val().indexOf('.') != -1) {
            return false;
        }
    }

    if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) {
        return false;
    }
});

As you can see in the above jQuery code, that it will get the element by its class name and will handle the keypress event to allow numbers and decimals only.

You can use allow-decimal class to any of your page items to allow only numbers with decimals into those fields.

Now save the changes and run the page to test.