Accept only digits for h:inputText value

问题:

Is there a way to confirm the value of an h:inputText in JSF, which should accepts only digits. Means it can be an Integer or the float.

If I type 12s3a562.675 , a5678s12 , 68712haf.563345 or any other such kind of values, then it should show an error. Otherwise it accepts and proceeds.

回答1:

Just bind the input value to a Double, or better, BigDecimal property instead of String.

private BigDecimal number; // Double can also, but beware floating-point-gui.de

<h:inputText value="#{bean.number}" />

JSF has builtin converters for those types which will kick in automatically. You can customize the converter message as below:

<h:inputText value="#{bean.number}" converterMessage="Please enter digits only." />

回答2:

<h:inputText onkeypress="if(event.which &lt; 48 || event.which &gt; 57) return false;"/> is a short way if you want to accept integers only.

It has the advantage over type="number" that you can't even enter a non-digit

回答3:

If you add this to your xhtml

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

and use the inputext for numbers of Primefaces Extensions called pe:inputNumber , which not only validate your numbers but decimals also, may be more complete.

<pe:inputNumber value="#{beanTest.myValue}" thousandSeparator="" decimalSeparator="." decimalPlaces="0" />

回答4:

Try

<h:inputText value="SomeValue" converter="javax.faces.Double" />

回答5:

Here are some different options:

• You can use @Digits from bean validation.
• You can use f:convertNumber.
• You can validate the input in a backing bean method (you'll easily find tutorials for this)
• If jsf 2.2 and html5 is an option for you, you can use <input type="number" />
• Or you can use your own Javascript validation.

I think that the best options are either using Bean validation, f:convertNumber or going with HTML5 as these are the cleanest and give you the least redundant code.

回答6:

This is working for me

onkeypress="if( (event.which < 48 || event.which > 57) ) return false;"

回答7:

You can use a JS validation

First, you need to define a JS function to validate the input

function validateInput(regexString) {
    var theEvent = window.event || event;
    var key = theEvent.keyCode || theEvent.which;
    if (key >= 46) {
        key = String.fromCharCode(key);
        var regex = new RegExp("^" + regexString + "$");
        if (!regex.test(key)) {
            theEvent.returnValue = false;
            if (theEvent.preventDefault) {
                theEvent.preventDefault();
            }
        }
    }
}

Second, in your h:input, capture the onKeyPress event and call the function

<h:inputText value="..." onKeyPress="validateInput('[0-9]*')/>

And it will only let you enter numbers.

You can easily extend this use to other case when you need to validate whit other regex.

Note, this only work with key press, if you want to capture other user event, use the proper tag.

Cheers

回答8:

Instead of PrimeFaces Extension for you can use now!

https://www.primefaces.org/showcase/ui/input/inputNumber.xhtml

回答9:

Try this

<h:inputText>
   <f:validateRegex pattern="\d*(.\d+)?"/>
</h:inputText>

回答10:

A html5, cross browser and client side solution could be

<script>
  //<![CDATA[   
  $(document).ready(function(){
    $("#someinputid\\:withcolon").attr('type', 'number');
  });
  //]]>
</script>

• For firefox this enables info bubbles to advice the user to input valid numbers before submitting
• For IE it submits immediately, clears the input widget, resets to zero (if input is invalid), doesn't give the user a chance to correct on client side, but ensures a valid server request
• For chrome not tested

you need to reference a jquery resource if not implicitly available by e.g. prime faces