Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

JSF I - Email não valida com HTML 5

Olá, Realizei toda a atualização para o JSF 2.2, utilizei o atributo f:passThroughAttribute, conferi meu código fonte e o type do atributo foi alterado para email, mas mesmo assim a validação no email do navegador (html 5) não esta ocorrendo :/

Essa é minha view:

<?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:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">


<ui:composition template="_template.xhtml">

    <f:metadata>
        <f:viewParam name="autorId" value="#{autorBean.autor.id}" />
        <f:viewAction action="#{autorBean.carregarPorId}"
            if="#{param.autorId != null}" />
    </f:metadata>



    <ui:define name="titulo">Novo Autor</ui:define>
    <ui:define name="conteudo">
        <h:form>

            <h:messages id="messages" />

            <fieldset>
                <legend>Dados do Autor</legend>
                <h:panelGrid columns="2">
                    <h:outputText value="Nome" for="nome" />
                    <h:inputText id="nome" value="#{autorBean.autor.nome}"
                        required="True" requiredMessage="Nome é Obrigatório">
                        <f:ajax event="blur" render="messages" />
                    </h:inputText>

                    <h:outputText value="Email" for="email" />
                    <h:inputText id="email" value="#{autorBean.autor.email}" required="true">
                        <f:passThroughAttribute name="type" value="email" />
                    </h:inputText>

                </h:panelGrid>

                <h:commandButton value="Gravar" action="#{autorBean.gravar}">
                    <f:ajax execute="@form" render="@form tabelaAutores" />
                </h:commandButton>
                <br /> <br />
                <fieldset>
                    <legend>Lista de Autores</legend>
                    <h:dataTable id="tabelaAutores" value="#{autorBean.autores}"
                        var="autor">
                        <h:column>
                            <h:outputText value="#{autor.nome}" />
                        </h:column>
                        <h:column>
                            <h:commandButton id="removeAutor" value="X"
                                action="#{autorBean.remover(autor)}" immediate="true" />
                        </h:column>
                        <h:column>
                            <h:commandButton id="alteraAutor" value="Alterar"
                                action="#{autorBean.carregar(autor)}" />
                        </h:column>
                    </h:dataTable>
                </fieldset>
            </fieldset>
        </h:form>
    </ui:define>
    <!-- FIM DO CONTEUDO -->
    <ui:define name="rodape-nome-formulario">
        Autores
    </ui:define>
</ui:composition>
</html>

Esse é meu faces-config.xml:

<?xml version="1.0" encoding="UTF-8"?>

<faces-config version="2.2"
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd">


    <lifecycle>
        <phase-listener>br.com.alura.livraria.util.LogPhaseListener</phase-listener>
    </lifecycle>

</faces-config>

Esse é meu fonte:

<table>
<tbody>
<tr>
<td>Nome</td>
<td><input id="j_idt11:nome" type="text" name="j_idt11:nome" value="" onblur="mojarra.ab(this,event,'blur',0,'j_idt11:messages')" /></td>
</tr>
<tr>
<td>Email</td>
<td><input id="j_idt11:email" name="j_idt11:email" value="" type="email" /></td>
</tr>
</tbody>
</table>

Valeu!

7 respostas

O atributo required, que força a validação HTML, não está sendo passado. Uma possível solução é colocar ele no passThrough também!

<f:passThroughAttribute name="required" value="true" />

Olá Marco, Com o atributo require, a validação ficou mais maluca ainda. Se eu não preecher o email aparece a mensagem:

<h:outputText value="Email" for="email" />
                    <h:inputText id="email" value="#{autorBean.autor.email}" required="true">
                        <f:passThroughAttribute name="type" value="email" />
                        <f:passThroughAttribute name="required" value="true" />
                    </h:inputText>
j_idt11:email: Validation Error: Value is required.

Mas essa mensagem parece que foi enviado pelo JSF e não pelo HTML 5. parece que o HTML 5 não está "ativado" ou algo assim...

E quando tento apagar um autor apareceu a mensagem

! Preencha este campo

no campo de email (essa mensagem apareceu como um box de html 5. Sendo que para apagar autor nem ocorre validação de campo! Não está fazendo muito sentido.

Hum, realmente do modo que está feito ele daria esse erro. Isso porque o formulário de criar autor e a lista de autores estão dentro do mesmo formulário, e um requer validação e outro não. Vou ver se consigo entrar em contato com o instrutor pra ele poder te esclarecer melhor o que está dando errado!

Oi Luis,

use um <h:form> para o formulário e um outro novo <h:form> para a <h:dataTable>, ok?

abs, Nico

Olá Nico,

Separei em dois forms diferentes, isso resolveu o problema de apagar o Autor, agora consigo apagar autores que acabei de cadastrar sem nenhum comportamento anormal.

Mas o validador do HTML 5 ainda parece que não está sendo chamado :/

Minha view ficou assim:

<?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:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">


<ui:composition template="_template.xhtml">

    <f:metadata>
        <f:viewParam name="autorId" value="#{autorBean.autor.id}" />
        <f:viewAction action="#{autorBean.carregarPorId}"
            if="#{param.autorId != null}" />
    </f:metadata>



    <ui:define name="titulo">Novo Autor</ui:define>
    <ui:define name="conteudo">
        <h:form id="form-cadastro-autor">

            <h:messages id="messages" />

            <fieldset>
                <legend>Dados do Autor</legend>
                <h:panelGrid columns="2">
                    <h:outputText value="Nome" for="nome" />
                    <h:inputText id="nome" value="#{autorBean.autor.nome}"
                        required="True" requiredMessage="Nome é Obrigatório">
                        <f:ajax event="blur" render="messages" />
                    </h:inputText>

                    <h:outputText value="Email" for="email" />
                    <h:inputText id="email" value="#{autorBean.autor.email}"
                        required="true">
                        <f:passThroughAttribute name="type" value="email" />
                        <f:passThroughAttribute name="required" value="true" />
                    </h:inputText>

                </h:panelGrid>

                <h:commandButton value="Gravar" action="#{autorBean.gravar}">
                    <f:ajax execute="@form"
                        render="@form :form-exibe-autor:tabelaAutores" />
                </h:commandButton>
                <br /> <br />
            </fieldset>
        </h:form>
        <h:form id="form-exibe-autor">
            <fieldset>
                <legend>Lista de Autores</legend>
                <h:dataTable id="tabelaAutores" value="#{autorBean.autores}"
                    var="autor">
                    <h:column>
                        <h:outputText value="#{autor.nome}" />
                    </h:column>
                    <h:column>
                        <h:commandButton id="removeAutor" value="X"
                            action="#{autorBean.remover(autor)}" immediate="true" />
                    </h:column>
                    <h:column>
                        <h:commandButton id="alteraAutor" value="Alterar"
                            action="#{autorBean.carregar(autor)}" />
                    </h:column>
                </h:dataTable>

            </fieldset>
        </h:form>
    </ui:define>
    <!-- FIM DO CONTEUDO -->
    <ui:define name="usuario-logado">
        <!-- <h:outputText value="#{emailUsuario}" />  -->
        <h:outputText value="#{sessionScope['usuarioLogado'].email}" />
    </ui:define>
</ui:composition>
</html>
solução!

Pessoal, consegui resolver o problema XD

Assisinto o curso Java e JSF2 - II: Componentes ricos com primefaces - aula 3 Componentes ricos no formulário, o Instrutor Nico diz que explica que o componente do botão que faz a requisição não pode ter o AJAX ativado, pois se tiver ele não fará a autenticação em HTML 5, ele inclusive mostra um exemplo com o "p:commandButton" (que o primefaces usa AJAX por padrão - logo a validação HTML 5 não funciona) e o "h:commandButton" (sem AJAX, e o HTML 5 faz a validação).

Sendo assim, bastou alterar o meu botão para não utilizar AJAX e funcionou a validação =D \o/

<h:commandButton value="Gravar" action="#{autorBean.gravar}">
                    <!-- <f:ajax execute="@form"
                        render="@form :form-exibe-autor:tabelaAutores" />  -->
                </h:commandButton>

Obrigado pela ajuda!

Oi Luis,

exato, faz tudo sentido :) Obrigado por compartilhar a solução!!

abs