Bind com rich:jquery não funciona

Front-end
#1

Olá, pessoal.

Recentemente fiquei responsável por uma aplicação cuja view é o RichFaces 3.3.3. Como nunca havia trabalhado com JSF antes (estou saindo dos desktops), venho tenho certas dificuldades que podem parecer bobas, e provavelmente são.

CENÁRIO: Preciso habilitar o botão submit somente quando todos os campos do form forem preenchidos.

Carrego os seguintes js na minha pagina:

<a4j:loadScript src="js/jquery.maskedinput-1.3.js"/>
<a4j:loadScript src="js/consultaSerasa.js"/>

consultaSerasa.sj:

function bindListener(){
	alert("Funciona!!!");
}

Um dos componentes:

<h:inputText id="cpfcnpj" value="#{consultaserasaremb.cpfcnpj}">
	<rich:jQuery selector="#cpfcnpj" query="mask('#{consultaserasaremb.cpfCnpjMask}')" timing="onload"/>
	<rich:jQuery selector="#cpfcnpj" query="bind('change keyup', bindListener)" timing="onload"/>
</h:inputText>

O resultado esperado é que quando o valor do campo cpfcnpj for alterado, a função bindListener (que conterá a validação de obrigatoriedadedos campos) seja executada.
O Problema é que isso não ocorre.

Não consigo identificar o problema, e não encontrei nenhum exemplo parecido.
Agradeço por qualquer ajuda.

Segue codigo da pagina inteira para referência:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

	<a4j:loadScript src="js/jquery.maskedinput-1.3.js"/>
	<a4j:loadScript src="js/consultaSerasa.js"/>
	
	<a4j:keepAlive beanName="consultaserasaremb" />
	<h:form>
		<h:panelGrid width="700px">
			<h:panelGrid columns="2" border ="1">		
				<h:column >
					<h:outputText border ="2" value="Tipo de Pessoa"/>
				</h:column>
				<h:column>
					<h:selectOneRadio id="radioTipoPessoa" value="#{consultaserasaremb.tipoPessoa}" valueChangeListener="#{consultaserasaremb.radioTipoPessoaChanged}">
						<f:selectItem itemLabel="Física" itemValue="F"/>
						<f:selectItem itemLabel="Jurídica" itemValue="J"/>
						<a4j:support event="onchange" reRender="dadosPessoais"/>
					</h:selectOneRadio>
				</h:column>
			</h:panelGrid>
			<h:panelGrid id="dadosPessoais" columns="2" border ="1">	
				<h:column  >
					<a4j:outputPanel  id="labelCpfCnpj">
						<h:outputText style="text-align: right;" value="#{consultaserasaremb.cpfCnpjLabel} "/>
					</a4j:outputPanel>
				</h:column>
				<h:column>
					<h:inputText id="cpfcnpj" value="#{consultaserasaremb.cpfcnpj}">
						<rich:jQuery selector="#cpfcnpj" query="mask('#{consultaserasaremb.cpfCnpjMask}')" timing="onload"/>
						<rich:jQuery selector="#cpfcnpj" query="bind('change keyup', bindListener)" timing="onload"/>
					</h:inputText>
				</h:column>
				<h:column>
					<h:outputText value="Nome" style="text-align: right;"/>
				</h:column>
				<h:column>
					<h:inputText value="#{consultaserasaremb.nome}"/>
				</h:column>
				<h:column>
					<h:outputText value="Produto"/>
				</h:column>
				<h:column>
					<h:selectOneMenu>
						<f:selectItem itemLabel="Teste" itemValue="1"/>
					</h:selectOneMenu>
				</h:column>
				<h:column>
					<h:outputText value=""/>
				</h:column>
				<h:column>
					<h:commandButton value="Consultar"/>
				</h:column>
			</h:panelGrid>
			
			<rich:tabPanel switchType="client">
				<rich:tab label="Dados Cadastrais">
					<h:outputText value="Dados Cadastrais"/>
				</rich:tab>
				<rich:tab label="Scorings">
					<h:outputText value="Scorings"/>
				</rich:tab>
			</rich:tabPanel>
		</h:panelGrid>
	</h:form>
</ui:composition>
#2

JhowTroMundo, tu ja tentou o evento onchange do próprio elemento <h:inputText>?

Outra sugestão seria usar o elemento a4j:support e chamar um método no bean que valide a obrigatoriedade desse campo, após algum evento ajax (onchange, onblur)…

Abraços.

#3

Cara,
usa o fireBug para descobrir se o id que foi renderizado eh realmente esse. Pode ser algo do tipo ‘myForm:cpfcnpj’. Se assim estiver, vc tem q passar dessa maneira como selector. ‘#myForm:cpfcnpj’ Tive um probema danado usando id como selector e preferi usar uma classe CSS:

&lt;h:inputText value="#{acao.instance.data}" id="data" size="7" style="textData"&gt;
				&lt;/h:inputText&gt;
&lt;rich:jQuery id="mskTextData" selector=".textData" timing="onload" query="mask('99/9999',{placeholder:' '})"&gt;
#4