Restrict number input to two fixed digits after decimal point

Question

Our project use PrimeFaces 5.1. I need to restrict user's type in for the number type. For example, the user can only type in like 123.12 (having two digits after decimal point). I tried to use <p:inputMask>, but the issue is the mask it define is fixed length. User has to type in exactly length defined in the mask attribute of <p:inputMask>. What will be the right way in PrimeFaces allow to define how many digits after decimal point and also can control the length?

Update:

I tried to create a simple page with the inputNumber component. But somehow what ever value typed in the inputNumber will be treated as null as it can't pass the required validation on the page level. enter image description here

Following is the xhtml.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">

    <h:head>
        <title>InputNumberTestingPage</title>
    </h:head>

    <h:body>
        <h:form id="form">
            <p:panel id="panel" header="Form" style="margin-bottom:10px;">
                <p:messages id="messages" />
                <h:panelGrid columns="3" cellpadding="5">
                    <p:outputLabel for="Name" value="Name: " />
                    <p:inputText id="Name" value="#{inputNumberTesting.name}" required="true" label="Name">
                        <f:validateLength minimum="2" />
                    </p:inputText>
                    <p:message for="Name" />

                    <p:outputLabel for="Salary" value="Salary:" />
                    <pe:inputNumber id="Salary" value="#{inputNumberTesting.salary}" 
                                    required="true" label="Salary" decimalPlaces="2" maxValue="9999"/>
                    <p:message for="Salary" />
                </h:panelGrid>
            </p:panel>
            <p:commandButton value="Submit" update="panel" actionListener="#{inputNumberTesting.save}" style="margin-right:20px;" />
        </h:form>
    </h:body>

</html>

Backing Bean.

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;

@ManagedBean(name = "inputNumberTesting")
@ViewScoped
public class InputNumberTesting {
    private Object name;

    private Object salary;

    public Object getName() {
        return name;
    }

    public void setName(Object name) {
        this.name = name;
    }

    public Object getSalary() {
        return salary;
    }

    public void setSalary(Object salary) {
        this.salary = salary;
    }

    public void save() {
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Name: "+getName()+"Salary: "+getSalary()));
    }
}

You can have a look at pe:inputNumber from PrimeFaces Extension. It works well for me. — ForguesR
@ForguesR I tried to use inputNumber but somehow not working. The value is always null — Kuku

Mustafa Mustafa · Accepted Answer · 2015-06-30T04:42:04

You can use InputNumber component in primefaces extensions library. First you need to add its dependency then you can use extensions namespace and usage should be like

xmlns:pe="http://primefaces.org/ui/extensions"


<pe:inputNumber id="Input1" value="#{inputNumberController.input1}"/>

You can customize min max numbers, decimal places, symbols for currency and more customization options exist in the component.

Restrict number input to two fixed digits after decimal point

1 Answers