Validação JSF

Olá pessoal! Seguinte, eu estou fazendo validação no JSF mas as mensagens de erros aparecem em frente ao campo, deslocando todos os campos para a esquerda. Tentei colocar as mensagens embaixo de todos os campos, mas ocorre que ao abrir a tela do cadastro, esses campos de mensagens já estão ocupando espaço em tela, sendo assim, ficam vários espaços em branco na tela para nada as vezes. Como posso fazer para eliminar isso?

Eis o código da página:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    
<%@taglib uri="http://java.sun.com/jsf/core" prefix="j" %> 
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<j:loadBundle basename="br.org.capixabavip.config.message_pt" var="msg"/>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Cadastro Usuário</title>

</head>
<body class="BODY">
	<center><h3>Cadastro de Usuário</h3>
	<j:view>		
		<font color="red" size="2pt">* = Campos Obrigatórios!</font>		
		<h:form id="cadastroUsuario">
		  <h:panelGrid columns="2" rules="all" title="Cadastro de Usuário" styleClass="tabelaCadastro">	
		  	<j:facet name="header">
		  		<h:outputText value="Cadastro de Usuário" />
		  	</j:facet>
		  	
			<h:outputLabel for="nome">			
				<h:outputText value="Nome: " />				
			</h:outputLabel>
		  		 
			<h:inputText id="nome" value="#{Usuario.nome}" required="true">
				<j:validator validatorId="valida" />
			</h:inputText>

<h:outputLabel for="usuario">
				<h:outputText value="Usuário: " />
			</h:outputLabel>
			<h:inputText id="usuario" value="#{Usuario.usuario}" required="true" />
						
			<h:outputLabel for="senha">
				<h:outputText value="Senha: " />
			</h:outputLabel>
			<h:inputSecret id="senha" value="#{Usuario.senha}" required="true" />			
			
			</h:panelGrid>
			
			<h:panelGrid columns="1" rules="all" title="Cadastro de Usuário" styleClass="tabelaCadastro">
				<br>
					<h:message for="nome" errorClass="errors" /> <br>
					<h:message for="usuario" errorClass="errors" /> <br>
					<h:message for="senha" errorClass="errors" /> <br>
			
				<j:facet name="footer">
					<h:panelGroup>
						<h:commandButton action="#{Usuario.save}" value="#{msg.botao_confirmar}"
							styleClass="button"/>
						<h:commandButton action="#{Usuario.cancelar}" value="Cancelar"
							styleClass="button"/>
					</h:panelGroup>	
				</j:facet>
			</h:panelGrid>
		  
		</h:form>	
</j:view>
	</center>
</body>
</html>

Ta usando JSP ?

olha como fica usando XHTML..

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
    <style type="text/css">
        .ecol1 { vertical-align: top; padding-right : 25px }
        .ecol2 { vertical-align: top; border-left: #ACBECE 1px solid; padding-left : 10px }
        .rich-calendar-tool-btn{
            font-family: Arial, Verdana;
        }
    </style>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <link rel="StyleSheet" type="text/css" href="../style/estilos.css" media="screen" />
    </head>
    <a4j:keepAlive beanName="pessoaMB" />
    <ui:composition template="/template/template.xhtml">
        <ui:define name="corpo">
            <rich:tabPanel switchType="ajax">
                <rich:tab label="Cadastro de Mensalidade">
                    <a4j:form>
                        <rich:messages />
                        <legend>Cadastro de Pessoa</legend>
                        <a4j:region id="regiaoAjax">
                            <a4j:status id="sts">
                                <f:facet name="start">
                                    <h:graphicImage value="/images/ajax-loader_1.gif" />
                                </f:facet>
                            </a4j:status>
                        </a4j:region>
                        
                        <fieldset>
                            <h:panelGrid columns="2" id="inputs">
                                <h:outputLabel for="matricula" value="Digite a Matrícula: " />
                                <h:inputText id="matriuclaInput" value="#{pessoaMB.pessoa.matricula}"  styleClass="inputPesquisa" >
                                    <a4j:commandButton  value="Pesquisar" action="#{pessoaMB.pesquisaByMatricula}" styleClass="inputPesquisaBtn2" reRender="inputs,fisicas,pessoas,listaumensalidade">
                                    </a4j:commandButton>
                                </h:inputText>

Nome:
                              
                                 
                                <h:selectOneMenu>
                                  <f:selectItems id="comboSelectItens" value="#{mensalidadeMB.PessoaParaComboBox}" />
                               </h:selectOneMenu>

<h:inputText id="idMensalidade" value="#{mensalidadeMB.mensalidade.idMensalidade}" styleClass="inputPesquisa3" size="4" >
                                </h:inputText>
                                <h:outputLabel for="Data Pagamento.:" value="Data Pagamento.: "  />
                                <rich:calendar id="data_pag" value="#{mensalidadeMB.mensalidade.data_pag}">
                                    <a4j:support event="ondateselected" />
                                </rich:calendar>
                                <h:outputLabel for="valor" value="Valor.: ($)"/>
                                <h:inputText id="valor" value="#{mensalidadeMB.mensalidade.valor}" styleClass="edit" size="30">
                                </h:inputText>
                            </h:panelGrid>
                               |<a4j:commandButton value="Inserir" action="#{mensalidadeMB.salva}" status="sts" reRender="inputs,fisicas,pessoas,mensalidade,mensalidades" styleClass="botoes"/>
                            |<a4j:commandButton value="Deletar" action="#{mensalidadeMB.delete}" status="sts" reRender="inputs,fisicas,pessoas,mensalidade" styleClass="botoes"/>
                            |<a4j:commandButton value="Modificar" action="#{mensalidadeMB.merge}" status="sts" reRender="inputs,fisicas,pessoas,mensalidade" styleClass="botoes"/>
                            |<a4j:commandButton value="Listar" action="#{mensalidadeMB.list}" status="sts" reRender="inputs,fisicas,pessoas,mensalidade" styleClass="botoes"/>
                            |<a4j:commandButton value="Relatório" action="toCadastraMensalidade" status="sts" reRender="inputs,fisicas,pessoas,mensalidade" styleClass="botoes"/>
                            |<a4j:commandButton value="Menslidades" action="toCadastraMensalidade" immediate="true" styleClass="botoes"/>
                            |<a4j:commandButton value="Voltar" immediate="true" action="toIndex" styleClass="botoes"/>|
                        </fieldset>

<rich:messages />
                        <fieldset><legend>Atualização de Dados</legend>
                            <f:subview id="listauser">
                                <rich:dataTable value="#{pessoaMB.pessoas}" var="pessoa" rows="1" id="pessoas" width="100%" cellspacing="0" cellpadding="0" border="5">
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="MATRÍCULA" />
                                        </f:facet>
                                        <h:outputText value="#{pessoa.matricula}" />
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="NOME" />
                                        </f:facet>
                                        <h:outputText value="#{pessoa.nome}" />
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="STATUS" />
                                        </f:facet>
                                        <h:outputText value="#{pessoa.status}" />
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Excluir"/>
                                        </f:facet>
                                        <a4j:commandLink action="#{pessoaMB.delete}" status="sts" reRender="inputs,fisicas,pessoas" >
                                            <h:outputText value="Excluir"/>
                                            <f:setPropertyActionListener value="#{pessoa.id}" target="#{pessoaMB.id}" /> 
                                        </a4j:commandLink>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Editar"/>
                                        </f:facet>
                                        <a4j:commandLink reRender="inputs,fisicas,pessoas" >
                                            <h:outputText value="Editar"/>
                                            <f:setPropertyActionListener value="#{pessoa}" target="#{pessoaMB.pessoa}" />
                                        </a4j:commandLink>
                                    </h:column>
                                    <f:facet name="footer">
                                        <rich:datascroller />
                                    </f:facet>
                                </rich:dataTable>
                            </f:subview>
                            <f:subview id="listaumensalidade">
                                <rich:dataTable value="#{mensalidadeMB.mensalidades}" var="mensalidade" rows="5" id="mensalidades" width="100%" cellspacing="0" cellpadding="0" border="5">
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="CÓDIGO" />
                                        </f:facet>
                                        <h:outputText value="#{mensalidade.idMensalidade}" />
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="DATA/PAGAMENTO" />
                                        </f:facet>
                                        <h:outputText value="#{mensalidade.data_pag}" />
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="VALOR" />
                                        </f:facet>
                                        <h:outputText value="#{mensalidade.valor}" />
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Excluir"/>
                                        </f:facet>
                                        <a4j:commandLink action="#{mensalidadeMB.delete}" status="sts" reRender="inputs,mensalidade,mensalidades" >
                                            <h:outputText value="Excluir"/>
                                            <f:setPropertyActionListener value="#{mensalidade.idMensalidade}" target="#{mensalidadeMB.idMensalidade}" /> 
                                        </a4j:commandLink>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Editar"/>
                                        </f:facet>
                                        <a4j:commandLink reRender="inputs,mensalidade,mensalidades" >
                                            <h:outputText value="Editar"/>
                                            <f:setPropertyActionListener value="#{mensalidade}" target="#{mesalidadeMB.mensalidade}" />
                                        </a4j:commandLink>
                                    </h:column>
                                    <f:facet name="footer">
                                        <rich:datascroller />
                                    </f:facet>
                                </rich:dataTable>
                            </f:subview>
                        </fieldset>
                    </a4j:form>
                </rich:tab>

                <rich:tab label="Lista de Pessoas">
                    <f:subview id="listauser">
                        <a4j:form>
                            <rich:messages />
                            <fieldset>
                                <a4j:region id="regiaoAjax">
                                    <a4j:status id="sts">
                                        <f:facet name="start">
                                            <h:graphicImage value="/images/ajax-loader_1.gif" />
                                        </f:facet>
                                    </a4j:status>
                                </a4j:region>
                                <h:panelGrid columns="2" id="inputs">
                                    <h:outputLabel for="nomeLabel" value="Digite o Nome: " />
                                    <h:inputText id="nomeInput" value="#{pessoaMB.pessoa.nome}" style=" width : 250px;"  styleClass="inputPesquisa">
                                        <a4j:commandButton value="Pesquisar" action="#{pessoaMB.pesquisaByNome}" reRender="pessoas">
                                        </a4j:commandButton>
                                    </h:inputText>
                                </h:panelGrid>
                            </fieldset>
                            <rich:dataTable value="#{pessoaMB.pessoas}" var="pessoa" rows="10" id="pessoas" width="100%" cellspacing="0" cellpadding="0" border="1">
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="MATRÍCULA" />
                                    </f:facet>
                                    <h:outputText value="#{pessoaMB.pessoa.matricula}" />
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="NOME" />
                                    </f:facet>
                                    <h:outputText value="#{pessoaMB.pessoa.nome}" />
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="E-MAIL" />
                                    </f:facet>
                                    <h:outputText value="#{pessoaMB.pessoa.email}" />
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="CPF" />
                                    </f:facet>
                                    <h:outputText value="#{pessoaMB.pessoa.cpf}" />
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="DATA NASC." />
                                    </f:facet>
                                    <h:outputText value="#{pessoaMB.pessoa.data_nasc}">
                                        <f:convertDateTime pattern="dd/MM/yyyy" />
                                    </h:outputText>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="CELULAR" />
                                    </f:facet>
                                    <h:outputText value="#{pessoaMB.pessoa.celular}" />
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Excluir"/>
                                    </f:facet>
                                    <a4j:commandLink action="#{pessoaMB.delete}" status="sts" reRender="inputs,fisicas,pessoas" >
                                        <h:outputText value="Excluir"/>
                                        <f:setPropertyActionListener value="#{pessoa.id}" target="#{pessoaMB.id}" />
                                    </a4j:commandLink>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Editar"/>
                                    </f:facet>
                                    <a4j:commandLink reRender="inputs,fisicas,pessoas" >
                                        <h:outputText value="Editar"/>
                                        <f:setPropertyActionListener value="#{pessoa}" target="#{pessoaMB.pessoa}" />
                                    </a4j:commandLink>
                                </h:column>

<f:facet name="footer">
                                    <rich:datascroller />
                                </f:facet>
                            </rich:dataTable>
                        </a4j:form>
                    </f:subview>
                </rich:tab>
                
                <rich:tab label="Filtros">
                </rich:tab>
                <rich:tab label="Relatórios">
                </rich:tab>
            </rich:tabPanel>
        </ui:define>
    </ui:composition>
</html>

tu pode controlar tudo mostra onde quiser até em um panel :

Valew Junior! Já sei mais ou menos como me virar agora aqui.

olha aqui:
required="true"

<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:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">

<h:form id="ajaxValidatorForm">
        <rich:panel>
            <f:facet name="header">
                <h:outputText value="User Info:" />
            </f:facet>
            <h:panelGrid columns="3">
                
                <h:outputText value="Name:" />
                <h:inputText value="#{userBean.name}" id="name" required="true">
                    <f:validateLength minimum="3" maximum="12"/>
                    <rich:ajaxValidator event="onblur"/>
                </h:inputText>
                <rich:message for="name" />
                
                <h:outputText value="Age:" />
                <h:inputText value="#{userBean.age}" id="age" required="true">
                    <f:convertNumber integerOnly="true"/>
                    <f:validateLongRange minimum="18" maximum="99"/>
                    <rich:ajaxValidator event="onblur"/>
                </h:inputText>
                <rich:message for="age"/>
                
            </h:panelGrid>
        </rich:panel>
    </h:form>
</ui:composition>

olha este exemplo:

/**
 * 
 */
package org.richfaces.demo.validation;

import org.hibernate.validator.Email;
import org.hibernate.validator.Length;
import org.hibernate.validator.Max;
import org.hibernate.validator.Min;
import org.hibernate.validator.NotEmpty;
import org.hibernate.validator.NotNull;
import org.hibernate.validator.Pattern;

/**
 * @author Ilya Shaikovsky
 *
 */
public class ValidationBean {

private String progressString="Fill the form please";
    
    @NotEmpty
    @Pattern(regex=".*[^\\s].*", message="This string contain only spaces")
    @Length(min=3,max=12)
    private String name;
    @Email
    @NotEmpty
    private String email;
    
    @NotNull
    @Min(18)
    @Max(100)
    private Integer age;
    
    public ValidationBean() {
    }

public String getName() {
        return name;
    }

public void setName(String name) {
        this.name = name;
    }

public String getEmail() {
        return email;
    }

public void setEmail(String email) {
        this.email = email;
    }

public Integer getAge() {
        return age;
    }

public void setAge(Integer age) {
        this.age = age;
    }
    public void success() {
        setProgressString(getProgressString() + "(Strored successfully)");
    }

public String getProgressString() {
        return progressString;
    }

public void setProgressString(String progressString) {
        this.progressString = progressString;
    }
}

<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:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">

<h:form id="ajaxValidatorForm2">
        <rich:panel>
            <f:facet name="header">
                <h:outputText value="User Info:" />
            </f:facet>
            <h:panelGrid  columns="3">
                <h:outputText value="Name:" />
                <h:inputText value="#{validationBean.name}" id="name" required="true">
                    <rich:ajaxValidator event="onblur" />
                </h:inputText>
                <rich:message for="name" />
                <h:outputText value="Email:" />
                <h:inputText value="#{validationBean.email}" id="email">
                    <rich:ajaxValidator event="onblur" />
                </h:inputText>
                <rich:message for="email" />
                <h:outputText value="Age:" />
                <h:inputText value="#{validationBean.age}" id="age">
                    <rich:ajaxValidator event="onblur" />
                </h:inputText>
                <rich:message for="age" />
            </h:panelGrid>
        </rich:panel>
    </h:form>
</ui:composition>

mais informações ?

http://livedemo.exadel.com/richfaces-demo/richfaces/graphValidator.jsf?c=graphValidator&tab=usage
http://imasters.uol.com.br/artigo/12384/jquery/validacao_de_formularios_com_jquery/

Notícias, artigos e o maior fórum brasileiro sobre Java