Validando formulários com Zend Form, jQuery e Ajax.
Sabemos que validar formulários hoje em dia é uma obrigação de todo bom desenvolvedor. E não validar apenas no cliente usando javascript, mas validar também no servidor. Validação é o primeiro de muitos passos para tornar sua aplicação mais segura.
Uma técnica que eu acabei descobrindo recentemente e estou usando bastante é juntar o poder do componente Zend_Form com o beleza do jQuery, o que me trouxe resultados muito bons, principalmente nos quesitos qualidade e desenvolvimento ágil.
Para demostrar essa técnica que eu estou utilizando eu vou partir do pressuposto que você já esta familiarizado com o ambiente do Zend Framework. Partindo disso, vou mostrar o código simples do formulário de cadastro:
class Cadastro_Form extends Zend_Form {
public function init() {
$this->setAttrib(‘id’, ‘cadastro’)
->setAction(‘/index/index’)
->setMethod(‘post’);
$this->addElement( ‘text’, ‘nome’, array(
‘label’ => ‘Nome’,
‘required’ => true,
‘validators’ => array(
‘NotEmpty’,
array(‘StringLength’, false, array(0, 60) )
)
));
$this->addElement(‘text’, ‘email’, array(
‘label’ => ‘E-mail’,
‘required’ => true,
‘validators’ => array(
‘NotEmpty’,
‘EmailAddress’
)
));
$this->addElement( ’submit’, ’submit’, array(
‘ignore’ => true,
‘label’ => ‘Entrar’
));
$this->getElement(’submit’)->removeDecorator(‘label’);
}
}
Agora que nosso formulário de cadastro já é um componente do projeto, vamos fazer as paginas, vou supor aqui que estamos trabalhando no controller index, portando criaremos duas actions para que nosso controller aqui fique da seguinte maneira:
/** Nesta action iremos exibir o formulario */
public function indexAction() {}
/** Nesta action iremos receber o dados por ajax para validação */
public function validarAction() {}
}
Temos o básico para começarmos a trabalhar. Agora a ideia é validarmos estes dados na tela do cliente via ajax, para que antes do cliente submeter os dados ele consiga visualizar os possíveis erros e já corrigi-los. Lembrando também que isso NÃO descarta a validação no servidor.
Vamos ver como fica nosso metodo indexAction():
$form = new Cadastro_Form;
if ($this->_request->isPost()) {
if ($form->isValid( $this->_request->getPost() )) {
$this->view->mensagem = ‘Formulario valido’;
}
else {
$this->view->mensagem = ‘Ops. Formulario invalido.’;
$form->populate( $this->_request->getPost() );
}
}
$this->view->form = $form;
}
E agora nossa index.phtml
Não podemos esquecer de adicionar a biblioteca jQuery a nossa camada view, pois ela irá nos ajudar muito no processo, vejamos o nosso código javascript para a validação:
$(‘#submit’).bind(‘click’, function (e) {
e.preventDefault();
var nome = $(‘#nome’).val();
var email = $(‘#email’).val();
$.ajax({
url: ‘/index/validar’,
type: ‘post’,
dataType: ‘json’,
data: {
nome: nome,
email: email
}
success: function (data) {
$(‘.form-errors’).remove();
if (data == true) alert( ‘Passou…’ );
else {
for (campo in data) {
$(‘#’+campo).after(‘<ul id="’+campo+‘_errors" class="form-errors"></ul>’);
for (mensagem in data[campo]) {
$(‘#’+campo+‘_errors’).append(‘<li>’+data[campo][mensagem]+‘</li>’);
}
}
}
}
});
});
});
Como vocês podem ver, nosso método validar irá retornar um objeto json para o jQuery poder trabalhar, e com o for iremos percorrer este objeto colocando cada mensagem em seu devido lugar. É um bom método por não fazer você ter que escrever duas validações, uma para javascript e outra para php. Você escreve apenas uma e utiliza em ambas as validações.
Agora nosso método validar:
if ($this->_request->isXmlHttpRequest()) {
$form = new Cadastro_Form;
echo $form->processAjax($this->_request->getPost());
}
}
Como vocês viram, devido ao nosso componente de formulário já está pronto tudo ficou muito mais simples, com apenas algumas linhas validamos e retornamos o resultado para o javascript poder exibir ao usuário.
O resultado desta combinação é muito interessante, pois mantem nossa aplicação modularizada, de forma que para adicionar novos campos no nosso formulário de cadastro não é necessário se preocupar com html e validação javascript, basta editar o componente Cadastro_Form.
Qualquer duvida deixa nos comentários ai que vamos trocando uma ideia. 
Referencias:
http://framework.zend.com/manual/en/zend.form.html
http://framework.zend.com/manual/en/zend.validate.html
http://docs.jquery.com/Ajax
