[RESOLVIDO] JQuery conflita com jsf2

Front-end
#1

Boa noite caros amigos, tenho uma aplicação em JSF 2, utilizo o Prime Faces… Estah dando conflito entre o inputText do prime ou da biblioteca h com o JQuery quando tento validar um campo qto ao seu preenchimento (“required:true”):

<p:inputText id="txtNome" value="#{FuncionarioBean.funcionario.nmFuncionario}"
					maxlength="50" 
					required="true" 
					requiredMessage="Informe o nome do Funcionario!"/>
<p:message for="txtNome" />

Desta forma que estah codificado o comandButton localizado no final do formulário para realizar o cadastro não funciona.
Simplesmente o submit não acontece.
Se eu manter a mesma lógica e colocar este botão noutro Formulário ele funciona mas a validação também não procede.

Código completo:

<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:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:mj="http://mojarra.dev.java.net/mojarra_ext">

<h:head>
	<h:outputScript library="javascript" name="jquery.js" target="head" />
	<h:outputScript library="javascript"
		name="jquery.maskedinput-1.1.4.pack.js" target="head" />
	<h:outputScript library="javascript" name="jquery.validate.js"
		target="head" />
	<h:outputScript library="javascript" name="funcoes.js" target="head" />

	<script language="JavaScript">
		var $j = jQuery.noConflict();
	
		$j(document).ready(function() {

			$j("#txtTelefone").mask("99-9999-9999");
			$j("#txtCpf").mask("999.999.999-99");

			$j("#formCadastroFuncionario").validate({
				// Define as regras
				rules : {
					txtCpf : {
						cpf : true
					},
					txtEmail : {
						email : true
					},
					txtConfirmaSenha : {
						equalTo : "#txtSenha",
						required : true
					},
					txtSenha : {
						padraoSenha : true
					}

				},
				// Define as mensagens de erro para cada regra
				messages : {
					txtCpf : {
						cpf : "CPF invalido"
					},
					txtEmail : {
						email : "Email invalido"
					},
					txtConfirmaSenha : {
						equalTo : "A senha não foi confirmada"
					}

				}
			// fim mensagens

			});//fim validate
		});//fim jquery
	</script>
</h:head>

<h:body>
	<div id="form">
		<h:form prependId="false">
			<h:commandLink value="Voltar" action="#{FuncionarioBean.doVoltar}"
				id="cmdVoltar" />
		</h:form>

		<h:form id="formCadastroFuncionario" prependId="false">
			<p:fieldset legend="Cadastro de Usuário">

				<mj:focus for="Setor:*" />
				<h:panelGrid columns="3" cellpadding="1" border="0" width="40%">

					<h:outputLabel id="lblSetor" value="Setor:*"/>
					<h:selectOneMenu
						value="#{FuncionarioBean.funcionario.estruturaOrganizacional.idUnidade}"
						id="txtSetor">
						<f:selectItems value="#{FuncionarioBean.listaSetores}" var="lista"
							itemLabel="#{lista.nmSglUnidade}" itemValue="#{lista.idUnidade}" />
					</h:selectOneMenu>
					<h:message for="txtSetor" styleClass="lbCampos" />


					<h:outputLabel id="lblTipoUsuario" value="Tipo Usuário:*"/>
					<h:selectOneMenu value="#{FuncionarioBean.tipoUsuario}"
						id="txtTipoUsuario">
						<f:selectItem itemValue="A" itemLabel="Administrador" />
						<f:selectItem itemValue="D" itemLabel="Diretor" />
						<f:selectItem itemValue="G" itemLabel="Gerente de Divisão" />
						<f:selectItem itemValue="F" itemLabel="Funcionário" />
						<f:selectItem itemValue="E" itemLabel="Estagiário" />
					</h:selectOneMenu>
					<h:message for="txtTipoUsuario" />

					<h:outputLabel id="lblNome" value="Nome:*" />
					<p:inputText id="txtNome"
								 value="#{FuncionarioBean.funcionario.nmFuncionario}"
						         maxlength="50" 
							     required="true" 
								 requiredMessage="Informe o nome do Funcionario!"/>
					<p:message for="txtNome" />
 
					<h:outputLabel id="lblCpf" value="CPF:*" />
					<h:inputText id="txtCpf"
						value="#{FuncionarioBean.funcionario.nrCpf}"  />
					<p:message for="txtCpf" />

					<h:outputLabel id="lbltelefone" value="Telefone:*"/>
					<h:inputText id="txtTelefone"
						value="#{FuncionarioBean.funcionario.nmFone}" />
					<h:message for="txtTelefone"/>

					<h:outputLabel id="lblCodigoCracha" value="Código Carchá:*" />
					<h:inputText id="txtCodigoCracha"
						value="#{FuncionarioBean.funcionario.idCracha}" maxlength="20" />
					<h:message for="txtCodigoCracha"/>

					<h:outputLabel id="lblEmail" value="email:*"/>
					<h:inputText id="txtEmail" value="#{FuncionarioBean.funcionario.nmEmail}" maxlength="30"/>
					<h:message for="txtEmail" styleClass="lbCampos" />

					<h:outputLabel id="lblMatricula" value="matrícula:*"/>
					<h:inputText id="txtMatricula"
						value="#{FuncionarioBean.funcionario.nmMatFuncionario}"
						maxlength="20" />
					<h:message for="txtMatricula" styleClass="lbCampos" />

					<h:outputLabel id="lblLogin" value="Usuário:*"/>
					<h:inputText id="txtLogin" value="#{FuncionarioBean.login}"
						maxlength="10">
						<f:ajax execute="txtLogin" render="txtNmLogin" />
					</h:inputText>

					<h:outputLabel></h:outputLabel>
					<h:outputLabel></h:outputLabel>

					<h:outputText id="txtNmLogin" class="error"
						value="#{FuncionarioBean.verificaDisponibilidade}" />
					<h:message for="lblLogin" styleClass="lbCampos" />


					<h:outputLabel id="lblSenha" value="Senha:*"/>
					<h:inputSecret id="txtSenha" value="#{FuncionarioBean.senha}"
						maxlength="20"/>
					<h:message for="txtSenha" styleClass="lbCampos" />

					<h:outputLabel id="lblConfirmaSenha" value="Confirmar Senha:*" />
					<h:inputSecret id="txtConfirmaSenha" maxlength="20" />
					<h:message for="txtConfirmaSenha" styleClass="lbCampos" />
					<p:commandButton type="submit" value="Cadastrar" action="#{FuncionarioBean.doEnviar}" />
					<p:commandButton type="reset" value="Limpar" action="#{FuncionarioBean.limparCampos}" />
					<h:outputLabel value="#{FuncionarioBean.msg}"
						rendered="#{FuncionarioBean.exibeMensagem}" />
				
				</h:panelGrid>
			</p:fieldset>
		</h:form>
	</div>

</h:body>
</html>

Alguém poderia me ajudar?
Um abraço e obrigado pela atenção…

#2

Foi um dos motivos que me fez abandonar o JSF

#3

para que validar via jquery sendo que no jsf 2, utilizando o primefaces como você está, você faz a verificação adequada ao campo?

no seu código:

$j("#txtTelefone").mask("99-9999-9999");  
$j("#txtCpf").mask("999.999.999-99");

com o primefaces:

&lt;p:inputMask mask="99-9999-9999" required="true" requiredMessage="Insira o telefone com o DDD"/&gt;
&lt;p:inputMask mask="999.999.999-99" required="true" requiredMessage="Insira seu CPF"/&gt;

se a pessoa não preencher todos os dígitos, ele nem vai guardar o valor no input.
olha o exemplo do primefaces neste link

outro detalhe que eu esqueci, para a validação ocorrer via ajax, você temq ue dar um update no teu formulário, que é onde consta o <p:messages /> e a sua ação do commandButton tem que ser ajax (ajax=“true”)

só não pode desistir por falta de atenção ^^

#4

Nem precisou de colocar ajax=“true”, só com o update na msg já funcionou, só que a msg que é impressa está sendo uma msg padrão do Prime, não é a minha requiredMessage.

#5

Agora está funcionando completamente, acho que era cache de quando eu testei sem colocar a requiredMessage. OBrigado pela atenção!

#6

coloca uma flag no teu tópico para indicar resolução [RESOLVIDO]

#7