Validação ultilizando Jquery com RichFaces

Pessoal Boa Noite,

Estou ultilizando no meu projeto (JSF, RichFaces, Facelets), tenho procurado na net uns exemplos sobre validações de input ultilizando Jquery com richFaces ou JSF. A minha dúvida é como chamar uma função de validação no botão a4j:commandButtom, pois ja tentei de várias formas e não tive sucesso alguem pode indicar uma solução pra isso?

Queria também saber como vocês fazem as válidações nos seus projetos?
Qual a melhor forma pra fazer as validações?
Como fazer pra apresentar as menssagens de erros com imagem ultilizando rich:menssage/

Eu faço validação no lado do servidor com JSF e uso Richfaces Rich:JQuery para máscaras.
Dê um exemplo para que eu possa ajudar.

Abraço

Flavio Almeida,

Por exemplo se um usuário clicar em um botão pesquisar sem digitar nada no inputText devera parecer uma menssagem de erro com uma imagem de erro por exemplo ( x Favor digitar um nome válido) ou um alert ultilizando uma função Jquery.

A primeira opção eu so estou com dúvidas no alinhamento do texto com a imagem no css

font-family: Arial,Helvetica,sans-serif; font-size: 14px; color: red; font-weight: bold; background-image: url(menssagem_errop.png); background-repeat: no-repeat; background-position:center left ; text-align: right;

A segunda opção não funcionou quando chamo a função no botão a4j:commandButtom se vc tiver algum exemplo que possa me ajudar?

Sei como fazer da forma que você está querendo, mas ela é muito mais complicada do que você colocar no inputText required = true
Com este atributo verdadeiro e uma h:message (ou rich:message), você consegue mostrar abaixo do campo a mensagem padrão do JSF pedindo que o campo seja preenchido.
O que acha?

<h:inputText id=“entrada1” … required=“true”>
<h:message for=“entrada1” style=“color:Red;” />

Bom eu sou a favor de validação do lado do cliente, logico que a validação do servidor é que realmente importa, a validação do lado cliente evita que o usuário envie um formulário incompleto, para o servidor validar e retornar a mensagem(requered="" do jsf) de erro, se poder evitar este processo é muito melhor devido o baixo trafico de informações na rede sem contar que o sistema ficará mais rapido nas validações.

Porem a validação do lado cliente, javascript, pode ser manipulado pelo usuário, atraves de ferramentas de desenvolvedores que são instaladas nos browsers para inspecionar uma pagina. Mas mesmo assim este processo é viavel já que não são todos os usuarios que podem manipular o javascript do site, e mesmo se o usuario manipular existe( deve existir) a validação do lado do servidor.

Eu utilizo o JQuery + puglin JQuery.Validade para validar os inputs de cadastro do meu sistema, evitando chamandas para o servidor desnecessarias.
Exemplo de como eu uso:

<body onload='loadValidate()'>//necessario para carregar a o plugin validade do JQuery

<rich:form id="frm">

<h:outputLabel id="lblNome">Nome: 
<h:inputText id="txtNome" value=#{md.cliente.nome}"/>
</h:outputLabel>
<br/>
<a4j:commandButton id="btnSalvar" action="#{md.salvar}" value="Salvar" onclick="if(validaForm()==false) return;"

</rich:form>

A função javascript que valida meu form é ‘validaForm’ lá eu consigo fazer qualquer validação da minha tela, eu utilizo o plugin validate do JQuery e não tenho nenhum problemas para validar via JS…

function loadValidate(){
	var $j = jQuery.noConflict();

	$j("#frm").validate({
		rules: {
			'frm:txtNome': {  required: true, minlength: 2  }
		},
		messages: {
			'frm:txtNome': 	{ required: "Escreva o nome do Cliente.", 	minlength: jQuery.format("O nome deve ter no minimo {0} caracteres") },
		success: function(label) {
			label.html("&nbsp;").addClass("checked");// set &nbsp; as text for IE
		},
		submitHandler: function(form) {
			return;
		}
	});

}

function validateForm(){
	var $j = jQuery.noConflict();
	
	if(!$j("#frm").validate().form())
		return false;
	
	return true;
}

Assim é possível validar qualquer formulário no jsf e ainda estou utilizando um plugin do JQuery que no inicio pensei que iria ter problemas devido ao nome gerados pelo jsf para os inputs mais é possível utilizar até mesmo o jquery para obter os inputs usando escape… ex:


escapeJsfIdToJQuery = function(id){
return "#"+id.replace(/:/g\"\\:");
}

//usando em qualquer função para obter os inputs atraves do JQuery

var $j = jQuery.noConflict();
$j(escapeJsfIdToJQuery ('frm:txtNome')).val('Valor do input');

espero ter ajudado… flw

Priuli, sua observação tem fundamento.

Fique atento, pois o Richfaces 4.0 será capaz de extrair as validações do BeanValidator e transformá-las em java-script no lado do cliente (cliente side validator).

Eu particularmente prefiro a solução mais simples de manter, até porque, atualmente, a validação do lado do servidor não nos causa problema de desempenho.
Nosso colega precisará levar isso em consideração em sua escolha, mas pelo visto, o que ele está precisando num primeiro momento é uma solução que funcione.
Espero que ele consiga.

Pessoal sou inicante em JSF as duas formas apresentadas são bem vindas.

Priuli enquanto validação de form com efeitos tipo na borda do input ficar vermelha por exemplo e as menssagens serem apresentadas pelo alert.

O padrão de chamar funções Jquery tratando- se validação de formulario com richfaces chama sempre dessa forma no buttom?

[quote=Flavio Almeida]
Fique atento, pois o Richfaces 4.0 será capaz de extrair as validações do BeanValidator e transformá-las em java-script no lado do cliente (cliente side validator).[/quote]

Interresante, irei pesquisar +.

[quote=Flavio Almeida]
Eu particularmente prefiro a solução mais simples de manter, até porque, atualmente, a validação do lado do servidor não nos causa problema de desempenho.
Nosso colega precisará levar isso em consideração em sua escolha, mas pelo visto, o que ele está precisando num primeiro momento é uma solução que funcione.
Espero que ele consiga.[/quote]

Realmente é muito mais simples. No meu caso tenho uma aplicação grande e com bastantes acessos de usuarios de uma rede local e está rede é lentissima no meu caso valeu a pena fazer, mais está abordagem traz vantagens para qualquer sistema web porem dá um trabalho duplo de validação.

[quote=robertinhodf]
Priuli enquanto validação de form com efeitos tipo na borda do input ficar vermelha por exemplo e as menssagens serem apresentadas pelo alert. [/quote]
A borda ficar vermelha o Jquery.validade faz por default, mais sem o validade teria que fazer campo a campo com if/else e mudar a borda ex:

//exemplo Sem JQuery validaForm = function(){ var txtNome = document.getElementById('frm:txtNome'); if(txtNome.value == ""){ txtNome .style.border='1px dashed red'; //não lembro de cabeça direito alert('Digite o nome'); //ou então Richfaces.showModalPanel('modalMessage'); //chamando um rich:modal carregado na tela document.getElementById('modalMessage:div').innerHTML = 'Digite o nome';//atualizando uma div existente dentro do modal.. return false; } return true; }
validar por js fica muito + trabalhoso e requer conhecimento de js, dhtml entre outros.

[quote=robertinhodf]
O padrão de chamar funções Jquery tratando- se validação de formulario com richfaces chama sempre dessa forma no buttom? [/quote]
Sim, c vc quiser validar o formulario todo atraves de javascript, jquery… tem que delegar a validação para qualquer função script e conforme a validação vc anula o evento onclick retornando nada, if(validaForm()==false)return;
o return impedira o funcionamento do botão…
Se ñ me engano há outro geito onde vc não precisa colocar nada no onclick do botão mais tem que utilizar o JQuery Validate e na função submitHandler: do validade vc coloca a chamada do botao, mais este caso vc vai tem que estudar neste plugin, mais ñ aconselho pois irá ter um trabalhão…

Pessoal se for possivel me ajudar com um exemplo de validar esse inputText com uma função Jquery eu agradeço muito porque estou uma tempo parado nisso, segue abaixo o código.

Código botão

Código inputText

<h:outputText value="Nome:" styleClass="font"/> <h:inputText id="consultarnome" value="#{suppliersList.searchValue}" size="50" styleClass="inputpesquisar" required="true"> </h:inputText>

Ressaltando que os exemplos abaixo eu não conseguir entender direito, se for possível me indicar como devo iniciar os estudos para entender melhor sobr JavaScript eu agradeço, principalmente pra usar com facelets e jsf.

É correto fazer a validação direto no botão com o evento onclick? Se for o que fazer pra funcionar o meu código abaixo?

[code]<a4j:commandButton id=“btnPesquisar” action= “#{suppliersList.search}” value=“Pesquisar” reRender=“tabelalista” styleClass="btmpesquisar"
onclick=“if (document.consult.consultarnome.value == ‘’){ alert (‘Campo Obrgatorio!’);
document.consult.cosultarnome.focus(); return false};”>

                    </a4j:commandButton>[/code]

Se quiser validar por JavaScript tem que ser botão mesmo no onclick.
Se o seu codigo JS não estiver funcionando, troque todas as chamadas document.consult.consultarnome por document.getElementById(‘consult.consultarnome’). O jsf usa um padrão para gerar os ids e o js não consegue entender a não ser se for pela função getElementById.
Depois verifique se não tá dando erro de javascript, o firefox tem um console de erro js muito bom…

Minha Referencia Para Estudo de JAvaScript
http://www.w3schools.com/js/default.asp
Minha Referencia para estudo de JQueyr
http://docs.jquery.com/Main_Page

Abrçs

Priuli obrigado pela atenção, mais continua não funcionando estou com dificuldades em resolver isso pois incluir o código js no onclick fiz as substitução que vc me indicou e continua não funcionando. Abaixo vou incluir o código da minha página pra que se for possivel vc analizar e me ajudar por favor

[code]

    <ui:composition template="/template.xhtml">
        <ui:define name="cont">

            <h:form  id="form" styleClass="form">
                <rich:panel id="consult" styleClass="font">
                    <f:facet name="header">
                        <h:outputText value="CONSULTAR SECRETARIA"/>
                    </f:facet>

                    <h3>Parâmetros - Cadastro de Secretarias</h3><br/>

                    <rich:separator height="2" lineType="solid"/><br/>

                    

                    <rich:messages for="consultarcodigo" styleClass="menssagem"/><br/>

                    <h:selectOneMenu id="rbselecionar" value="#{suppliersList.searchOption}" styleClass="font"
                                     valueChangeListener="#{suppliersList.verificarTipoPesquisa}" onchange="submit()"
                                     immediate="true">
                        <f:selectItems id="consulta" value="#{suppliersList.searchOptions}"/>
                    </h:selectOneMenu>

                    <rich:spacer height="10" width="20"/>

                    <h:panelGroup rendered="#{suppliersList.campoPesquisac}">
                        <h:outputText value="Codigo:" styleClass="font"/>
                        <h:inputText id="consultarcodigo" value="#{suppliersList.searchValuei}" size="50" styleClass="inputpesquisar"
                                     required="true" requiredMessage="FAVOR DIGITAR UM NUMERO INTEIRO!">
                            <f:convertNumber integerOnly="true"/>

                        </h:inputText>
                    </h:panelGroup>

                    <h:panelGroup rendered="#{suppliersList.campoPesquisa}">
                        <h:outputText value="Nome:" styleClass="font"/>
                        <h:inputText id="consultarnome" value="#{suppliersList.searchValue}" size="50" styleClass="inputpesquisar"
                                     required="true" requiredMessage="CAMPO OBRIGATÓRIO, FAVOR DIGITAR UM NOME!">
                            <f:validator validatorId="ValidadorSecretaria"/>
                            <rich:ajaxValidator reRender="btnPesquisar"/>

                        </h:inputText>
                    </h:panelGroup>

                    <rich:spacer width="20"/>

                    [b]<a4j:commandButton id="btnPesquisar" action= "#{suppliersList.search}" value="Pesquisar" reRender="tabelalista" styleClass="btmpesquisar"
                                       onclick="if (document.getElementById(form.consultarnom).valueOf() == ''){ alert ('Campo Obrigatorio!');
                                                    document.getElementById(form.cosultarnome).focus(); return false};">

                    </a4j:commandButton>[/b]
                    <rich:spacer width="20"/>
                    <a4j:commandButton id="bbtLimpar" value="Limpar" styleClass="btmlimpar" type="reset"/><br/><br/>

                    <rich:separator height="2" lineType="solid"/><br/>
                    <table align="center">
                        <tr>
                            <td><a4j:commandButton id="btnNovo" action="#{Secretaria.doConfirmaCadSecretaria}" value="Novo" styleClass="btmnovo"/>
                            </td>

                            <td><a4j:commandButton id="btnImpressão" type="submit" value="Impressão" styleClass="btmimprimir"/></td>

                            <td><a4j:commandButton id="btnRetornarMenu" action="#{Secretaria.retornarmenu}" value="Retornar Menu" styleClass="btmretornar"/></td>
                        </tr>
                    </table>

                    <div align="center">

                        <a4j:commandLink id="listartodos" value="Listar Todos" action="#{Secretaria.listartodos}" reRender="tabelalista"/><br/>
                        <rich:spacer height="15px"></rich:spacer>

                        <rich:datascroller for="tabelalista" maxPages="2"
                                           selectedStyle="font-weight:bold"/>
                    </div>

                    <rich:dataTable align="center" id="tabelalista" value="#{suppliersList.funsecretaria}" var="item" rows="2" width="60%"
                                    styleClass="tabela" headerClass="cabecalho" rowClasses="linha1,linha2">
                        <rich:column styleClass="coluna">
                            <f:facet name="header">
                                <h:outputText value="Codigo" styleClass="font"/>
                            </f:facet>
                            <h:outputText value="#{item.codigosecretaria}"/>
                        </rich:column>
                        <rich:column styleClass="coluna" >
                            <f:facet name="header">
                                <h:outputText value="Nome" styleClass="font"/>
                            </f:facet>
                            <h:commandLink action="#{Secretaria.doUpadateCadSecretaria}">
                                <h:outputText value="#{item.nome}" />
                                <f:setPropertyActionListener target="#{Secretaria.selectedSecretaria}" value="#{item}"/>
                            </h:commandLink>
                        </rich:column>
                        <rich:column styleClass="coluna">
                            <f:facet name="header">
                                <h:outputText value="Status" styleClass="font"/>
                            </f:facet>
                            <h:outputText value="#{item.status}" />
                        </rich:column>
                        <rich:column styleClass="coluna">
                            <f:facet name="header">
                                <h:outputText value="Data Inclusão" styleClass="font"/>
                            </f:facet>
                            <h:outputText value="#{item.datainclusao}">
                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                            </h:outputText>
                        </rich:column>

                    </rich:dataTable>
                </rich:panel>
            </h:form>
        </ui:define>
    </ui:composition>
</body> [/code]

Bom… o nome do id do seu input está diferente do que vc está buscando via JavaScript, e o parametro do comando java script está errado…

Tem que estár assim:

<a4j:commandButton id="btnPesquisar" action= "#{suppliersList.search}" value="Pesquisar" reRender="tabelalista" styleClass="btmpesquisar"
                                           onclick="if (document.getElementById('form:consultarnome').value == ''){ alert ('Campo Obrigatorio!');
                                                        document.getElementById('form:consultarnome').focus(); return false;};">

Verifica no codigofonte do html gerado se o id é este mesmo que eu coloquei quando estiver testando a tela no browser… se continuar dando erro explique o erro, se é erro no java ou erro de jscript…

Valeu Priuli agora funcionou muito obrigado pela sua atenção. So pra finalizar se eu quiser fazer essa função em um arquivo js como faço pra chamar essa função nesse botão? ou no RichFaces so funciona dessa forma? outra coisa a pesquisa por código não esta funcionando será que porque so validei somente por nome no botão pesquisar? o código ficou assim.

<a4j:commandButton id="btnPesquisar" action= "#{suppliersList.search}" value="Pesquisar" reRender="tabelalista" styleClass="btmpesquisar" onclick=" if (document.getElementById('form:consultarnome').value == '') { alert ('Campo Obrigatorio!'); document.getElementById('form:cosultarnome').focus(); return false; };"> </a4j:commandButton>

Preciso de fazer a validação na consulta por código também.

<a4j:commandButton id="btnPesquisar" action= "#{suppliersList.search}" value="Pesquisar" reRender="tabelalista" styleClass="btmpesquisar" onclick=" if (document.getElementById('form:consultarnome').value == '') { alert ('CAMPO OBRIGATÓRIO DIGITE NOME VÁLIDO!'); document.getElementById('form:cosultarnome').focus(); return false; } if (document.getElementById('form:consultarcodigo').value == '') { alert ('CAMPO OBRIGATÓRIO DIGITE NUMERO INTEIRO!'); document.getElementById('form:consultarcodigo').focus(); return false; }};"> </a4j:commandButton>

[quote]
So pra finalizar se eu quiser fazer essa função em um arquivo js como faço pra chamar essa função nesse botão? [/quote]

Para separar o javascript da sua pagina jsf, é só vc criar um arquivo com extenção js, criar sua função e importar este arquivo na sua pagina.
Exemplo:

<head>
      //importar o js na tag head da sua pagina.
      <script type="text/javascript" src="${pageContext.request.contextPath}/js/meuArquivo.js"></script>
</head>

meuArquivo.js (abaixo:)

function valida(){
return false;
}
<a4j:commandButton id="btnPesquisar" action= "#{suppliersList.search}" value="Pesquisar" reRender="tabelalista" styleClass="btmpesquisar"  
                                          onclick=" if(valida()==false)return;" />

Todos os campos, que quiser validar por js você tem que implementar, não tem jeito…
O código tem que funcionar, é exatamente como ultimo exemplo que postei, e logico ele só vai mostrar o alert se as outras validações passarem com sucesso…

Tente analisar onde está o erro caso contrario vc nunca ira apreender, entre naqueles sites que te passei para referencia de funções javascript, também é necessario vc saber os erros que estão ocorrendo, tente descobrir quais erros está tendo para vc conseguir arrumar.