Jsf+javaScript

Estou tentando executar alguns javascripts com jsf,mas nao tenho a menor nocao de como funciona,alguem teria um exemplo simples para demostrar,tipochecagem de valores em campos?
por exemplo como eu chamaria esta funcao em um evento onblur?
alguem pode dar uma luz?

<script language="javascript">
          function valida (){
          if(document.getElementsByName("qtdmax").value < document.getElementsByName("qtdmin").value)
          { alert ("O valor máximo nao pode ser menor que o minimo"); return false;}
          return true;
          }
         </script>
         

No botão

<h:commandButton onclick="valida()" />

cara msm assim na funciona ele nao faz nada qdo clicko no botao,o que pode ser:
meu codigo esta assim:


&lt;%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %&gt;
&lt;%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %&gt;
&lt;%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %&gt;
&lt;%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %&gt;
&lt;%@ taglib uri="http://richfaces.org/rich" prefix="rich" %&gt;

&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;&lt;/title&gt;
		&lt;link rel="stylesheet" type="text/css"href='&lt;%= request.getContextPath() + "/css/tabelas.css" %&gt;'&gt; 			
	   

	&lt;/head&gt;
	&lt;body&gt;
	 &lt;script language="javascript"&gt;  
           function valida (){  
           if(document.getElementsByName(&quot;qtdmax&quot;).value &lt; document.getElementsByName(&quot;qtdmin&quot;).value)  
           { alert (&quot;O valor máximo nao pode ser menor que o minimo&quot;); return false;}  
           return true;  
           }  
          &lt;/script&gt; 
         
		&lt;f:view&gt;
		 &lt;f:loadBundle basename="com.Lgweb.Tcc.Model.messages" var="msg"/&gt;
		 &lt;h:form id="prod"&gt;
		 &lt;c:import url="/topo.jsp"&gt;&lt;/c:import&gt;
			&lt;rich:separator width="967"&gt;&lt;/rich:separator&gt;
			&lt;h:panelGrid columns="2" width="800"&gt;
			&lt;h:column&gt;
				&lt;c:import url="/view/produto/leftBar.jsp"&gt;&lt;/c:import&gt;
			&lt;/h:column&gt;			
			&lt;h:column&gt;
				&lt;rich:panelBar height="500" width="900"&gt;
					&lt;rich:panelBarItem label="#{msg.cadastrarproduto}"&gt;
					   &lt;h:panelGrid columns="3" width="605"&gt; 
					   	   
					   	 &lt;h:commandButton  value="Log33333333in" onclick=" valida()"  immediate="true"/&gt; 
					   	&lt;h:outputText value="#{msg.modelo}"&gt;&lt;/h:outputText&gt;
					   	
					   	&lt;h:inputText value="#{produto.produto.modelo}" styleClass="select"label="#{msg.modelo}" maxlength="40" required="true"  id="modelo"  style=" width : 350px;"&gt;
					   						   							   		
					     &lt;/h:inputText&gt;
					   	 &lt;h:message for="modelo" styleClass="erro"   showSummary="true" showDetail="true"/&gt;
                        
                        
                        					   	
					   	&lt;h:outputText value="#{msg.linha}"&gt;&lt;/h:outputText&gt;
					   	&lt;h:inputText value="#{produto.produto.linha}" styleClass="select"label="#{msg.linha}" maxlength="40" required="true"  id="linha" style=" width : 350px;"&gt;					   							   		
					   	&lt;/h:inputText&gt;
					   	  &lt;h:message for="linha" styleClass="erro"   /&gt;
					   	
					   	&lt;h:outputText value="#{msg.numeracao}"&gt;&lt;/h:outputText&gt;	
					   	&lt;h:panelGroup&gt;			   	
					   	&lt;h:selectOneMenu value="#{produto.produto.numeracaoid}" styleClass="select" style=" width : 145px;" id="ids"&gt;
					   	&lt;f:selectItems value="#{produto.numeracaoids}"/&gt;		   	  				   	  
					   	&lt;/h:selectOneMenu&gt;	
					      &lt;h:graphicImage value="/images/BOTOES/Search.png" style="cursor:pointer" onclick="Richfaces.showModalPanel('mp',{width:450, top:200})" width="21" height="15"/&gt;
						
						
            &lt;/h:panelGroup&gt;		&lt;h:outputText value=""&gt;&lt;/h:outputText&gt;
					   	
					   	
					   	&lt;h:outputText value="#{msg.qtdmin}"&gt;&lt;/h:outputText&gt;
					   	&lt;h:inputText value="#{produto.produto.qtdminima}" styleClass="select"label="#{msg.qtdmin}" maxlength="6" required="true" id="qtdmin"&gt;
					   	&lt;f:validateLongRange minimum="1" maximum="100000"/&gt;					   							   		
					   	&lt;/h:inputText&gt;
					   	  &lt;h:message for="qtdmin" styleClass="erro"  /&gt;
					   	
					   	
					   	
					   	&lt;h:outputText value="#{msg.qtdmax}"&gt;&lt;/h:outputText&gt;
					   	&lt;h:inputText value="#{produto.produto.qtdmaxima}" styleClass="select"label="#{msg.qtdmax}" maxlength="6" required="true"  id="qtdmax"&gt;
					   	&lt;f:validateLongRange minimum="1" maximum="100000"/&gt;					   							   		
					   
					   	&lt;/h:inputText&gt;
					   
					   	 &lt;h:message for="qtdmax" styleClass="erro"  /&gt;
					   		
					   	&lt;h:outputText value="#{msg.qtdatual}"&gt;&lt;/h:outputText&gt;
					   	&lt;h:inputText value="#{produto.produto.qtdatual}" styleClass="select"label="#{msg.qtdatual}" maxlength="6" required="true"  id="qtdatual"&gt;					   							   		
					   	&lt;f:validateLongRange minimum="1" maximum="100000"/&gt;	
					   	&lt;/h:inputText&gt;
					   	 &lt;h:message for="qtdatual" styleClass="erro"   /&gt;
					   	&lt;h:outputText value="#{msg.valorvenda}"&gt;&lt;/h:outputText&gt;
					   	&lt;h:inputText value="#{produto.produto.valorvenda}" styleClass="select"label="#{msg.valorvenda}" maxlength="10" required="true"  id="custo"&gt;
					  &lt;/h:inputText&gt;
					   	  &lt;h:message for="custo" styleClass="erro"   /&gt;
					   	
					   	&lt;h:outputText value="#{msg.valorcompra}"&gt;&lt;/h:outputText&gt;
					   	&lt;h:inputText value="#{produto.produto.valorcompra}" styleClass="select"label="#{msg.valorcompra}" maxlength="2" required="true"  id="compra"&gt;					   							   		
 
					   	&lt;/h:inputText&gt;
					   	  &lt;h:message for="compra" styleClass="erro"   /&gt;
					   	
					   	&lt;h:outputText value="#{msg.situacao}"&gt;&lt;/h:outputText&gt;
					   	&lt;h:selectOneMenu value="#{produto.produto.situacao}" id="situacao" styleClass="select" required="true"  style=" width : 143px;"&gt;
					   		&lt;f:selectItem itemLabel="#{msg.ativo}" itemValue="A"/&gt;
					   		&lt;f:selectItem itemLabel="#{msg.inativo}" itemValue="I"/&gt;
					   	&lt;/h:selectOneMenu&gt;
					   	  &lt;h:message for="situacao" styleClass="erro"   /&gt;
					   	&lt;h:outputText value="#{msg.data}"&gt;&lt;/h:outputText&gt;	
					   		&lt;rich:calendar value="#{produto.produto.datacadastro}"styleClass="select" 
					   	immediate="true" datePattern="dd/MM/yyyy"&gt;
										
									&lt;/rich:calendar&gt;	   			   	
					     &lt;/h:panelGrid&gt;
					   &lt;/rich:panelBarItem&gt;
					   &lt;/rich:panelBar&gt;
					   &lt;/h:column&gt;
					   &lt;/h:panelGrid&gt;
				 &lt;center&gt;
					   &lt;h:commandButton action="#{produto.create}"  value="#{msg.salvar}"  styleClass="newButton"&gt;&lt;/h:commandButton&gt;
					   &lt;h:commandButton action="listproduto" value="#{msg.cancelar}" styleClass="newButton" immediate="true"&gt;&lt;/h:commandButton&gt;
					   &lt;h:commandButton action="Menu" value="#{msg.menu}" styleClass="newButton" immediate="true"&gt;&lt;/h:commandButton&gt;
					   &lt;rich:separator width="969"&gt;&lt;/rich:separator&gt;
				&lt;c:import url="/Statusbar.jsp"&gt;&lt;/c:import&gt;
		 		&lt;/center&gt;
		 		
		 		
		 &lt;/h:form&gt;
		   
		   
		    &lt;script&gt;

         function getRightTop(ref) {

           var position = new Object();

           position.top = 0; //ref.offsetTop;

           position.left =0; // ref.offsetLeft+ref.clientWidth+6;

           return position;

         }

        &lt;/script&gt;
	
        &lt;rich:modalPanel  id="mp" minHeight="300" minWidth="700" 

            height="300" width="700" zindex="2000"&gt;
            				
            &lt;f:facet name="header"&gt;

                &lt;h:outputText value="#{msg.cadastrarnumeracao}" /&gt;

            &lt;/f:facet&gt;
           
            &lt;h:form&gt;
             
			&lt;rich:separator width="700"&gt;&lt;/rich:separator&gt;
			
                 &lt;h:panelGrid columns="3" width="700"&gt;
					   	&lt;h:outputText value="#{msg.codigo}"&gt;&lt;/h:outputText&gt;
					   	&lt;h:inputText value="#{numeracao.numeracao.numeracaoid}" styleClass="select" readonly="true" disabled="true"&gt;&lt;/h:inputText&gt;
					   	&lt;h:inputHidden value=""&gt;&lt;/h:inputHidden&gt;
					   						   	
					   	&lt;h:outputText value="#{msg.numero}"&gt;&lt;/h:outputText&gt;
					   	&lt;h:inputText value="#{numeracao.numeracao.numero}" styleClass="select"label="Numeração" maxlength="2" required="true" requiredMessage="#{msg.obrigatorio}" id="numero"&gt;					   							   		
					   	 	&lt;f:validateLongRange minimum="34" maximum="49"/&gt;	
					   	&lt;/h:inputText&gt;
					   	&lt;h:message for="numero" styleClass="erro"&gt;&lt;/h:message&gt;						   	
					   &lt;h:outputText value="#{msg.observacoes}"&gt;&lt;/h:outputText&gt;
					   &lt;h:inputTextarea value="#{numeracao.numeracao.observacoes}" styleClass="select" style="width : 422px; height : 117px;"&gt;&lt;/h:inputTextarea&gt;					   
					   &lt;/h:panelGrid&gt;			  		   
					   &lt;rich:separator width="700"&gt;&lt;/rich:separator&gt;				
		 		&lt;center&gt;
				&lt;h:commandLink value="#{msg.salvar}" action="#{numeracao.create}"&gt;&lt;/h:commandLink&gt;
                <a >Fechar</a>:
				&lt;/center&gt;
               
              
&lt;/h:form&gt;
        &lt;/rich:modalPanel&gt;  

		&lt;/f:view&gt;
		
		
  
	&lt;/body&gt;	
&lt;/html&gt;  


olha so eu coloquei o codigo todo aew, coloquei um botao para tentar fazer a verificacao,ja tentei com “return valida()”;,mas ate agora nada,se puder me ajudar fico grato.
abracos

vc tem que usar tmb o id do seu componente validado junto com id do form.

Opa blz cara,nao entendi direito o que vc falou?
Eu ja tentei assim

 var max=document.getElementById(prod:qtdmax).value;
           var min=document.getElementById(prod:qtdmin).value;

mas tambem nao obtive exito,o que sera que esta faltando?

nesse último exemplo, faltou colocar os ids entre aspas :wink:

blz pessoal mto obrigado,consegui assim:


 function valida (){  
          
           var max=document.getElementById(&quot;prod:qtdmax&quot;).value;
           var min=document.getElementById(&quot;prod:qtdmin&quot;).value;
           if(max &lt; min)  
           { alert (&quot;O valor máximo nao pode ser menor que o minimo&quot;); 
           return false;
           
           }  
           return true;  
           }  

Mas to com uma duvida,tem como deixar o foco no campo qtdmax caso a qtd seja maior que a qtdminima?
valew abracos

Coloque esse codigo na sua função.

document.getElementById("prod:qtdmin").focus()

valew cara funcionou o focus, mto obrigado a tds pela forca t+