Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

MauricioBolognese

[Resolvido] Formatação usando Zend_Form

Recommended Posts

Você pode utilizar as validações do Zend Validate (o Zend Form utiliza estas). Tem uma sugestão do Immagens em um post (é sobre fitros, mas serve para validação também).

http://forum.imasters.com.br/index.php?/topic/366817-mudar-formato-de-data-e-float/page__view__findpost__p__1420183

 

Agora, porque não utilizar o Zend Form?

 

Carlos Eduardo

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa, tudo bom Carlos?

Na verdade ainda não desisti de utilizar o Zend_Form na integra.

É que estou sentindo uma dificuldade MUITO grande em formatar o bicho.

E nos projetos que normalmente estou envolvido, a formatação é importantíssima.

Se eu for perder muito tempo formatando form não faço mais nada.

Achei a formatação original, digamos que por falta de outra palavra, fraca, já que ninguém em seu perfeito estado utiliza os forms dessa maneira.

 

Vou mostrar +/- o que quero fazer.

Imagem Postada

Ambos são o mesmo form, no entanto no de baixo, apliquei o seguinte CSS.

dl {
margin: 0;
padding: 0;
width: 300px;
}

dt, dd {
display: block;
float: left;
margin: 0;
padding: 0;
width: 150px;
}

dt {
clear: left;
}

Uma das dificuldades é no posicionamento do form.

Ele fica centralizado. o que não é o que preciso... preciso dele alinhado a esquerda.

Ai tentei colocar um "id" no form para poder aplicar um CSS a ele, mas não consegui.

 

Outra situação.

Digamos que eu tenha um campo de CEP e queira colocar um link ao lado do campo para a busca de cep.

Nem sonho em como conseguiria fazer isso.

 

Saberia me dizer como faço isso?

 

Obrigado pela atenção.

 

 

 

 

 

Você pode utilizar as validações do Zend Validate (o Zend Form utiliza estas). Tem uma sugestão do Immagens em um post (é sobre fitros, mas serve para validação também).

http://forum.imasters.com.br/index.php?/topic/366817-mudar-formato-de-data-e-float/page__view__findpost__p__1420183

 

Agora, porque não utilizar o Zend Form?

 

Carlos Eduardo

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olha, como até o momento ainda não precisei fazer isto, não posso te afirmar se vai funcionar, mas para modificar a marcação html que é utilizada no formulário, você modifica os decorators.

 

http://framework.zend.com/manual/en/zend.form.elements.html#zend.form.elements.decorators

http://framework.zend.com/manual/en/zend.form.forms.html#zend.form.forms.decorators

http://framework.zend.com/manual/en/zend.form.decorators.html

http://framework.zend.com/manual/en/zend.form.html

 

Espero ter ajudado.

 

Carlos Eduardo

Compartilhar este post


Link para o post
Compartilhar em outros sites

Já tinha visto que o caminho seria pelo decorator, e não tava conseguindo fazer.

Depois de ficar batendo cabeça, cheguei as seguintes conclusões:

 

Se usar fieldset ele gera um tag "<dt>" vazio que impede o alinhamento correto.

Sendo assim desisti de usar fieldset, até pq vou colocar esse form dentro de uma table trabalhada pra ficar "bonitinho".

Tirando ele, alinha beleza.

 

Para atribuir um id ao form, basta usar o comando:

$form->setName('cadastro');

Para atribuir uma classe:

$form->setAttrib('class', 'cadastro');

 

Agora minha dúvida está sendo em como formatar o posicionamento da mensagem de erro.

 

Imagem Postada

 

Saberia me dizer como eu trabalho o posicionamento das mensagens como na imagem acima?

 

Valeu pela ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olha, por padrão o ZF coloca a mensagem dentro de uma ul li, dentro do dd. Olha um exemplo

<dt id="data_nascimento-label">
     <label for="data_nascimento" class="required">Data de Nascimento*</label>
</dt>
<dd id="data_nascimento-element">
     <input type="text" name="data_nascimento" id="data_nascimento" value="" maxlength="10" />
     <ul class="errors">
        <li>Este campo não pode ser vazio</li>
     </ul>
</dd>

Então, para formatar a mensagem, jogue o CSS dentro de dd ul li.

 

Se usar fieldset ele gera um tag "<dt>" vazio que impede o alinhamento correto.

 

Comigo isto não acontece. Como você gerou o fieldset? Olha um exemplo.

http://www.potencias.com.br/trabalhe/

O código que gera este formulário.

$this->setMethod('post');

// E-mail
$this->addElement('text','email', 
array(
	'label' => 'E-mail*',
	'maxlength' => 45,
	'required' => true,
	'filters' => array('StringTrim','StripTags'),
	'validators' => array('EmailAddress')));

// Data de Nascimento		
$this->addElement('text','data_nascimento',
array(
	'label' => 'Data de Nascimento*',
	'maxlength' => 10,
	'required' => true,
	'filters' => array('StringTrim','StripTags'),
	'validators' => array('Date')));

// Nome
$this->addElement('text','nome', 
array(
	'label' => 'Nome completo*',
	'maxlength' => 30,
	'required' => true,
	'filters' => array('StringTrim','StripTags'),
	'validators' => array('stringLength'), 
	'options' => array(6,30)));

// Cpf
$this->addElement('text','cpf',
array(
	'label' => 'CPF*',
	'maxlength' => 14,
	'required' => true,
	'filters' => array('Digits'),
	'validators' => array('Digits')));

// Sexo
$this->addElement('select','sexo',
array(
	'label' => 'Sexo*',
	'required' => true,
	'multiOptions' => array(
        	'' => '-----------------',
               'm' => 'Masculino',
               'f' => 'Feminino',),
));

// Estado Civil
$this->addElement('select', 'estado_civil',
array(
	'label' => 'Estado Civíl*',
	'required' => true,
	'multiOptions' => array(
        	'' => '-------------------',
               'Casado' => 'Casado(a)',
               'Solteiro' => 'Solteiro(a)',
			'Divorciado' => 'Divorciado(a)',
			'Viúvo' => 'Viuvo(a)')));


// Telefone Residencial
$this->addElement('text','tel_residencial', 
array(
	'label' => 'Telefone Residencial',
	'maxlength' => 12,
	'filters' => array('StringTrim','Digits','StripTags')));

// Telefone Celular
$this->addElement('text','tel_celular', 
array(
	'label' => 'Telefone Celular*',
	'required' => true,
	'maxlength' => 12,
	'filters' => array('StringTrim','Digits','StripTags')));

// CEP
$this->addElement('text','cep',
array(
	'label' => 'CEP*',
	'required' => true,
	'maxlength' => 10,
	'filters' => array('StringTrim','Digits','StripTags')
));

// Rua
$this->addElement('text','rua', 
array(
	'label' => 'Rua*',
	'maxlength' => 45,
	'required' => true,
	'filters' => array('StringTrim','StripTags')));

// Número
$this->addElement('text','numero',
array(
	'label' => 'Número*',
	'required' => true,
	'maxlength' => 20,
	'filters' => array('StringTrim', 'StripTags')));

// Complemento
$this->addElement('text','complemento',
array(
	'label' => 'Complemento',
	'maxlength' => 45,
	'filters' => array('StringTrim', 'StripTags')));

// Bairro
$this->addElement('text','bairro',
array(
	'label' => 'Bairro*',
	'required' => true,
	'maxlength' => 45,
	'filters' => array('StringTrim', 'StripTags')));

// Cidade
$this->addElement('text','cidade',
array(
	'label' => 'Cidade*',
	'maxlength' => 45,
	'required' => true,
	'filters' => array('StringTrim', 'StripTags')));

// Estado
$this->addElement('select','estado',
array(
	'label' => 'Estado*',
	'required' => true,
	'multiOptions' => array(
		'' => '----',
		'SC' => 'SC',
		'PR' => 'PR',
		'RS' => 'RS')));

// Escolaridade
$this->addElement('select','escolaridade',
array(
	'label' => 'Grau de Escolaridade*',
	'required' => true,
	'multiOptions' => array(
		'' => '---------------------------------------------------------------------',
		'Primeiro Grau Incompleto' => 'Primeiro Grau Incompleto',
		'Primeiro Grau Completo' => 'Primeiro Grau Completo',
		'Segundo Grau Incompleto' => 'Segundo Grau Incompleto',
		'Segundo Grau Completo' => 'Segundo Grau Completo',
		'Terceiro Grau Incompleto' => 'Terceiro Grau Incompleto',
		'Terceiro Grau Completo' => 'Terceiro Grau Completo',
		'MBA, Mestrado, Pós-Graduação e/ou Doutorado' => 'MBA, Mestrado, Pós-Graduação e/ou Doutorado')));


// Instituição
$this->addElement('text','instituicao',
array(
	'label' => 'Instituição da última escolaridade*',
	'maxlength' => 45,
	'required' => true,
	'filters' => array('StringTrim', 'StripTags')));

// Data de conclusão
$this->addElement('text','data_conclusao',
array(
	'label' => 'Data de conclusão(aproximado)*',
	'maxlength' => 10,
	'required' => true,
	'filters' => array('StringTrim', 'StripTags'),
	'validators' => array('Date')));

// Começa aqui os dados da última experiência
// Última experiência - Data de entrada
$this->addElement('text','ult_exp_entrada',
array(
	'label' => 'Data de Entrada*',
	'maxlength' => 10,
	'required' => true,
	'filters' => array('StringTrim', 'StripTags'),
	'validators' => array('Date')));

// Última experiência - Data de saída
$this->addElement('text','ult_exp_saida',
array(
	'label' => 'Data de Saída - Caso seja a atual, deixe em branco',
	'maxlength' => 10,
	'filters' => array('StringTrim', 'StripTags'),
	'validators' => array('Date')));

// Última experiência - Cargo
$this->addElement('text','ult_exp_cargo',
array(
	'label' => 'Último cargo exercido*',
	'maxlength' => 45,
	'required' => true,
	'filters' => array('StringTrim', 'StripTags')));

// Última experiência - Empresa
$this->addElement('text','ult_exp_empresa',
array(
	'label' => 'Nome da empresa*',
	'maxlength' => 45,
	'required' => true,
	'filters' => array('StringTrim', 'StripTags')));

// Última experiência - Salário
$this->addElement('text','ult_exp_salario',
array(
	'label' => 'Último salário*',
	'maxlength' => 10,
	'required' => true,
	'validators' => array('Float')));

// Última experiência - Descrição
$this->addElement('textarea','ult_exp_descricao',
array(
	'label' => 'Descrição das funções exercidas na empresa*',
	'required' => true,
	'filters' => array('StringTrim', 'StripTags')));


// Começa aqui os dados da penúltima experiência
// Penúltima experiência - Data de entrada
$this->addElement('text','pen_exp_entrada',
array(
	'label' => 'Data de Entrada',
	'maxlength' => 10,
	'filters' => array('StringTrim', 'StripTags'),
	'validators' => array('Date')));

// Penúltima experiência - Data de saída
$this->addElement('text','pen_exp_saida',
array(
	'label' => 'Data de Saída',
	'maxlength' => 10,
	'filters' => array('StringTrim', 'StripTags'),
	'validators' => array('Date')));

// Penúltima experiência - Cargo
$this->addElement('text','pen_exp_cargo',
array(
	'label' => 'Último cargo exercido',
	'maxlength' => 45,
	'filters' => array('StringTrim', 'StripTags')));

// Penúltima experiência - Empresa
$this->addElement('text','pen_exp_empresa',
array(
	'label' => 'Nome da empresa',
	'maxlength' => 45,
	'filters' => array('StringTrim', 'StripTags')));

// Penúltima experiência - Salário
$this->addElement('text','pen_exp_salario',
array(
	'label' => 'Último salário',
	'maxlength' => 10,
	'validators' => array('Float')));

// Penúltima experiência - Descrição
$this->addElement('textarea','pen_exp_descricao',
array(
	'label' => 'Descrição das funções exercidas na empresa',
	'filters' => array('StringTrim', 'StripTags')));

// Informações adicionais
$this->addElement('textarea','informacoes',
array(
	'label' => 'Informações adicionais sobre você',
	'filters' => array('StringTrim', 'StripTags')));

// Considerações adicionais
$this->addElement('textarea','consideracoes',
array(
	'label' => 'Considerações adicionais. Use este espaço para qualquer informação não contemplada anteriormente',
	'filters' => array('StringTrim', 'StripTags','Alnum')));

// Captcha
$this->addElement('captcha','captcha',array( 
'label' => 'Por favor, entre com as cinco letras exibidas abaixo:' , 
'required' => true , 
'captcha' => array( 
	'captcha' => 'Image',
	'font' => 'library/Font/tahoma.ttf', 
	'fontSize' => '36', 
	'imgDir' => 'public/images/captcha/', 
	'imgUrl' => 'public/images/captcha/',
	'height' => 80,
	'width' => 300, 
	'expiration' => 500, 
	'wordLen' => 5, 
	'timeout' => 300)));

// Botão de Submit
$this->addElement('submit','enviar',array(
'class' => 'botao',
'label' => 'Cadastrar Currículo'));

// Grupo Dados Pessoais
$this->addDisplayGroup(array('nome','data_nascimento','cpf','sexo','estado_civil'),'Dados Pessoais',array('legend' => 'Dados Pessoais'));

// Grupo Dados de Contato
$this->addDisplayGroup(array('tel_residencial','tel_celular','email','cep','rua','numero', 'complemento','bairro','cidade', 'estado'),'Dados de Contato',array('legend' => 'Dados de Contato'));

// Grupo Escolaridade
$this->addDisplayGroup(array('escolaridade','instituicao','data_conclusao'),'Escolaridade',array('legend' => 'Escolaridade'));

// Grupo Última Experiência
$this->addDisplayGroup(array('ult_exp_entrada','ult_exp_saida','ult_exp_cargo','ult_exp_empresa','ult_exp_salario', 'ult_exp_descricao'),'Última Experiência',array('legend' => 'Última Experiência'));

// Grupo Penúltima Experiência
$this->addDisplayGroup(array('pen_exp_entrada','pen_exp_saida','pen_exp_cargo','pen_exp_empresa','pen_exp_salario', 'pen_exp_descricao'),'Penúltima Experiência',array('legend' => 'Penúltima Experiência'));

// Grupo Informações adicionais
$this->addDisplayGroup(array('informacoes','consideracoes','captcha','enviar'),'Informações Adicionais',array('legend' => 'Informações Adicionais'));

Eu particularmente prefiro utilizar o formulário assim, com o nome em cima e o campo em baixo. Mas nada impede de colocar um do lado do outro como você precisa, só mexendo no CSS (acho que jogando o dd e o dt com float left já resolve).

 

Carlos Eduardo

Compartilhar este post


Link para o post
Compartilhar em outros sites

Carlos,

 

Utilizei o seu código, mas ele é diferente do que está usando no site.

Digo isso porque vai gerar um código diferente.

No atualizado do site, você atribui ID´s... não vi isso no código do seu form.

<dt [u]id="DadosPessoais-label"[/u]>

Com o seu código gerei o seguinte form (note a diferença em relação aos ID´s:

<form id="cadastro" enctype="application/x-www-form-urlencoded" method="post" class="cadastro" action="cadastro"><dl class="zend_form">
[u]<dt> </dt>[/u]<dd><fieldset id="fieldset-DadosPessoais"><legend>Dados Pessoais</legend>
<dl>
<dt><label for="nome" class="required">Nome completo*</label></dt>
<dd>
<input type="text" name="nome" id="nome" value="" maxlength="30"></dd>
<dt><label for="data_nascimento" class="required">Data de Nascimento*</label></dt>
<dd>
<input type="text" name="data_nascimento" id="data_nascimento" value="" maxlength="10"></dd>
<dt><label for="cpf" class="required">CPF*</label></dt>
<dd>
<input type="text" name="cpf" id="cpf" value="" maxlength="14"></dd>
<dt><label for="sexo" class="required">Sexo*</label></dt>
<dd>
<select name="sexo" id="sexo">
    <option value="" label="-----------------">-----------------</option>
    <option value="m" label="Masculino">Masculino</option>
    <option value="f" label="Feminino">Feminino</option>
</select></dd>
<dt><label for="estado_civil" class="required">Estado Civíl*</label></dt>
<dd>
<select name="estado_civil" id="estado_civil">
    <option value="" label="-------------------">-------------------</option>
    <option value="Casado" label="Casado(a)">Casado(a)</option>
    <option value="Solteiro" label="Solteiro(a)">Solteiro(a)</option>
    <option value="Divorciado" label="Divorciado(a)">Divorciado(a)</option>
    <option value="Viúvo" label="Viuvo(a)">Viuvo(a)</option>
</select></dd></dl></fieldset></dd>
<dt> </dt><dd>...

Outra coisa, fui no seu código e peguei o CSS pra tentar simular o seu resultado, e mesmo assim não chegou nem perto de parecido... e o tag <dt> sublinhado é o que está "empurrando" tudo pra direita... ele gera um espaçamento, não alinhando tudo a esquerda.

 

CSS usado:

form{margin:5px;}
fieldset{padding:10px; border:1px solid #4B4B4B;}
legend{font-size: 14px;	font-weight: bold; margin:0 auto; padding:5px;}
label {font-size:10px; margin: 5px 0; display:block; font-size:12px;}
zend_form.forminput {width:300px; padding:5px 10px; background-color:#D0D0D0; border:0;}
textarea{width:300px; height: 150px; padding:5px 10px; background-color:#D0D0D0; border:0; font-family:Tahoma, Geneva, sans-serif; font-size:12px;}
ul.errors{font-size: 10px; background-color: #FBB; text-align: center; margin: 5px 0; padding: 10px; border: 1px solid #900; list-style-type: none;}

Desculpa pegar seu código, mas estou realizando testes... quero me entender com o zend e só testando pra saber o que ele vai gerar. Será que eu utilizei corretamente ou fiz lambança?

 

Abraços.

Compartilhar este post


Link para o post
Compartilhar em outros sites

O código é o mesmo utilizado no site. Eu peguei direto de lá. O que pode estar diferente é em função do doctype definido ou no seu layout ou no seu bootstrap.

 

No bootstrap

Zend_Layout::startMvc('layouts/scripts');

$layout = Zend_Layout::getMvcInstance()->getView();

$layout->doctype('XHTML1_TRANSITIONAL');

No layout eu faço assim.

echo $this->doctype();

Desculpa pegar seu código

 

Fica frio. Se não fosse pra pegar, nem tinha colocado aqui.

 

Carlos Eduardo

Compartilhar este post


Link para o post
Compartilhar em outros sites

Deve ser alguma outra coisa, porque o doctype está exatamente o mesmo..

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

O meu bootstrap está assim:

	public static function setupView() {
		$view = new Zend_View ( );
		$view->setEncoding ( 'UTF-8' );
		Zend_Layout::startMvc ( array ('layoutPath' => self::$root . 'application/default/views/layouts', 'layout' => 'layout' ));
		$registry = Zend_Registry::getInstance();
		$registry->set('view',$view);
	}
	
	public static function sendResponse(Zend_Controller_Response_Http $response) {
		$response->setHeader ( 'Content-Type', 'text/html; charset=UTF-8', true );
		$response->sendResponse ();
	}

Separei ele em funções pra ficar organizado...

Devo trocar alguma coisa?

 

O CSS que está usando pra organizar é esse mesmo que postei acima?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tá, só uma pergunta. Você coloca este doctype na forma que você colocou ali em cima direto no arquivo.phtml?

Se fizer assim, pode (vai) dar errado, porque o Framework não vai saber qual o doctype que você está utilizando. Faça como eu postei ali em cima.

Já tentou efetuar a validação no W3C?

 

Eu tive o mesmo problema no início. Olha neste post aqui.

http://forum.imasters.com.br/index.php?/topic/362258-resolvidovalidacao-no-w3c-do-zend-form/

 

Carlos Eduardo

 

EDIT - Sobre o CSS, estou usando este aqui para formatar o formulário.

form{margin:5px;}
fieldset{padding:10px; border:1px solid #4B4B4B;}
legend{font-size: 14px;	font-weight: bold; margin:0 auto; padding:5px;}
label {font-size:10px; margin: 5px 0; display:block; font-size:12px;}
input {width:300px; padding:5px 10px; background-color:#D0D0D0; border:0;}
textarea{width:300px; height: 150px; padding:5px 10px; background-color:#D0D0D0; border:0; font-family:Tahoma, Geneva, sans-serif; font-size:12px;}
ul.errors{font-size: 10px; background-color: #FBB; text-align: center; margin: 5px 0; padding: 10px; border: 1px solid #900; list-style-type: none;}

Compartilhar este post


Link para o post
Compartilhar em outros sites

É eu estava fazendo isso mesmo, direto no .phtml

 

Adicionei a linha "$view->doctype('XHTML1_TRANSITIONAL');" na minha função, mas isso estaria correto???

 

	public static function setupView() {
		$view = new Zend_View ( );
		$view->setEncoding ( 'UTF-8' );
                $view->doctype('XHTML1_TRANSITIONAL');
		Zend_Layout::startMvc ( array ('layoutPath' => self::$root . 'application/default/views/layouts', 'layout' => 'layout' ));
		$registry = Zend_Registry::getInstance();
		$registry->set('view',$view);
	}

E mandei imprimir o doctype na view, mas não mudou nada.

 

Como devo alterar meu bootstrap?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Faça como eu sugeri ali em cima.

 

Zend_Layout::startMvc('layouts/scripts');
$layout = Zend_Layout::getMvcInstance()->getView();
$layout->doctype('XHTML1_TRANSITIONAL');

E no layout (e não na view) dê um echo $this->doctype();

 

Carlos Eduardo

Compartilhar este post


Link para o post
Compartilhar em outros sites

Depois de fuçar por horas, consegui deixar o form bem próximo do seu.

No entanto não colocou os "id´s" de um jeito nem de outro.

 

A única coisa que não consegui replicar foi o uso do jquery pra fazer as bordas arredondadas.

Inclusive a sua página deu erro nisso no meu IE7.

 

Detalhes dos erros da página da Web

Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.30729; InfoPath.2; .NET CLR 3.5.21022; .NET CLR 3.5.30729; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET CLR 1.1.4322; msn OptimizedIE8;PTBR)
Carimbo de data/hora: Fri, 6 Nov 2009 23:16:36 UTC


Mensagem: Chamada inesperada para acesso à propriedade ou método.
Linha: 145
Caractere: 17
Código: 0
URI: http://www.potencias.com.br/public/scripts/jquery.corner.js

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.