How use mask in input field in JSF 2 + RichFaces 4?

Question

I need to have some masks in my input fields in my form. I try to insert the jQuery.js and jQuery.MaskedInput.js as show in the code below:

<h:head>
    <h:outputScript name="jquery-1.6.4.min.js" library="javascript" />
    <h:outputScript name="jquery.maskedinput-1.3.js" library="javascript" />

    <script>
        jQuery(function($){
           $("#date").mask("99/99/9999");
           $("#phone").mask("(999) 999-9999");
           $("#tin").mask("99-9999999");
           $("#ssn").mask("999-99-9999");
       });
    </script>

    <title>TITLE</title>
</h:head>

<h:body>
     <h:form id="form">
        <h:inputText id= "date"  />
    </h:form>
</h:body>

BUt nothing so far.

UPDATE With BalusC $("[id='form:phone']").mask("(99) 9999-9999"); it works fine! (thanks dude). But I need apply this mask in a datatable :

<script>
    jQuery(function($){
       $("input.phones").mask("(999) 999-9999");
   });
</script>

<title>TITLE</title>

 <h:form id="form">

   <h:panelGrid columns="3">
        <h:outputLabel for="phones" value="Telefone(s) :" />                
        <h:dataTable id="phones" value="#{profile.user.userPhones}" var="item">
            <h:column>
                <h:inputText id= "phone" value="#{item.phone}" />
            </h:column>
            <h:column>
                <h:commandButton value="Remove" action="#{profile.removePhone}"/>
            </h:column>
            <h:column>
                <rich:message id="m_phone" for="phone" />
            </h:column>
        </h:dataTable>
    <h:commandButton value="Add" action="#{profile.addPhone}"/>
   </h:panelGrid>    

</h:form>

Any idea ?

BalusC · Accepted Answer · 2011-10-25T03:01:56.820

8

JavaScript/jQuery runs in browser and works on the HTML DOM tree which is generated by JSF and sent to the browser, it does not intercept on the JSF component tree itself. Your $("#date") will return nothing as there exist no element with that ID in the HTML DOM tree. Open the page in your browser, rightclick and View Source. You'll see that it's actually been generated as <input id="form:date">, not as <input id="date">.

You should instead use the following selectors (note that : is an illegal character in CSS and should thus be escaped):

$("#form\\:date").mask("99/99/9999");
$("#form\\:phone").mask("(999) 999-9999");
$("#form\\:tin").mask("99-9999999");
$("#form\\:ssn").mask("999-99-9999");

or, without the need for explicit escape:

$("[id='form:date']").mask("99/99/9999");
$("[id='form:phone']").mask("(999) 999-9999");
$("[id='form:tin']").mask("99-9999999");
$("[id='form:ssn']").mask("999-99-9999");

Or, alternatively, just give them a classname:

<h:inputText id="date" styleClass="date" />
<h:inputText id="phone" styleClass="phone" />
<h:inputText id="tin" styleClass="tin" />
<h:inputText id="ssn" styleClass="ssn" />

which can then more generically be selected as follows without the need for fiddling with IDs of possibly multiple input fields of the same type in the view, such as inside a <h:dataTable>:

$("input.date").mask("99/99/9999");
$("input.phone").mask("(999) 999-9999");
$("input.tin").mask("99-9999999");
$("input.ssn").mask("999-99-9999");

edited Oct 25 '11 at 03:01

answered Oct 25 '11 at 00:39

BalusC

1,082,665
372
3,610
3,555

Balusc, I follow your approach and help me, thanks dude. But I'm trying to understand the id generated by my datatable to use in the jQuery mask, could you please help me with that ? – Valter Silva Oct 25 '11 at 02:18
Ah, it's inside a datatable? You could use the ends-with selector `$("[id$=date]")`, but using a CSS class is much better (read: not error prone) for such case as you've multiple of them now. – BalusC Oct 25 '11 at 02:51
Thanks ! using $("[id$=date]") really solve my problem. You said to use CSS, but there's no attribute 'class' in , should'nt be styleClass instead ? – Valter Silva Oct 25 '11 at 03:05
for the first time I help you , ayeeeeee! ;) (by the way, you have beatiful children, thanks for everything mate) – Valter Silva Oct 25 '11 at 11:31
@BalusC I have tried using your examples, the mask works but my method is not called on button click, any ideas? – Jun 06 '12 at 19:10
@Daniel: it's not clear what exactly you mean with "my method" in the context of the original question, this doesn't seem to be related to input masking. Please press `Ask Question` if you have a new question. – BalusC Jun 06 '12 at 19:15

score 0 · Answer 2 · edited Nov 25 '14 at 15:30

0

Using JSF and RichFaces I managed to solve the conflict masks like this:

var $j = jQuery.noConflict();

window.onload = function () {
    $j(#{rich:element('parProcecessoNumProtocolo')}).mask('9999.999999/9999-99');
}

edited Nov 25 '14 at 15:30

Casey Rule

2,085
2
18
28

answered Nov 25 '14 at 15:01

erivanio

1

How use mask in input field in JSF 2 + RichFaces 4?

2 Answers2

Linked