Diego Henrique » Javascript

Validando formulários com Zend Form, jQuery e Ajax.

Diego Henrique — Fri, 22 May 2009 02:44:53 +0000

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:

class IndexController extends Zend_Controller_Action {

        /** 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():

public function 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

if(isset($this->mensagem)){?>
 echo $this->mensagem; ?>

 echo $this->form; ?>

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:

$(document).ready(function() {

        $(‘#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(‘+campo+‘_errors" class="form-errors">’);

                                                for (mensagem in data[campo]) {

                                                        $(‘#’+campo+‘_errors’).append(‘’+data[campo][mensagem]+‘
’);

                                                }

                                        }

                                }

                        }

                });

        });

});

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:

public function validarAction() {

        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

Expressões regulares com javascript

Diego Henrique — Mon, 26 Jan 2009 12:59:26 +0000

Uma das coisas mais uteis no mundo da computação são as expressões regulares. Elas nos dão um poder incrivel de manipular dados. Escrevi esse post com base nos meus estudos recentes sobre expressões regulares no javascript, portanto se você encontrar erros por favor reporte-os nos comentarios. Outra coisa é que não é minha ideia ensinar expressões regulares aqui, quero apenas mostrar como usa-las no javascript, se você tem interesse em aprender expressões regulares eu recomendo o guia-er do Aurelio, que é referencia nacional no assunto (inclusive ele possui um livro publicado sobre o assunto, excelente por sinal). Vamos lá então…

O objeto RegExp.

Vou mostrar aqui dois metodos do objeto:

test – Testa a expressão regular e retorna true caso a expressão case com um valor.
exec – Executa a busca pela expressão regular retornando um array com informações do primeiro valor casado

Para definirmos um objeto do tipo RegExp basta atribuir a uma variavel o padrão desejado dentro de duas barras, assim:

var regex = /([0-2][0-9]|3[01])\/(0[1-9]|1[0-2])\/([12][0-9]{3})/;

Simples né? Agora vamos supor a seguinte string:

var string = ‘Eu, Diego, nasci em 10/09/1985′;

Vamos agora procurar uma data dentro dessa string usando o metodo exec:

var saida = regex.exec( string );

O metodo exec nos retorna um vetor onde o primeiro indice (0) é o nosso casamento, e os demais indices são os grupos casados, no nosso caso a saida é:

array {

        0 => 10/09/1985

        1 => 10

        2 => 09

        3 => 1985

}

Se formos apenas validar uma data qualquer, como se estivessemos validando uma data em um formulario, poderiamos simplesmente fazer assim:

if (regex.test( ’10/09/1985′ )) {

        alert( ‘Data valida!’ );

}

Lembrando que o metodo test retorna apenas true ou false!

O objeto String.

O objeto String contem alguns metodos que podemos usar expressões regulares, são eles:

match – Semelhante ao metodo exec do objeto RegExp retorna um array com os resultados
search – Procura por um casamento na string e torna a posição que encontrou o casamento ou -1 caso não consiga casar o padrão.
replace – Substitui um padrão por uma outra string
split – Quebra a string em nos locais que encontrar o padrão.

Para mostrar os metodos do objeto String vamos primeiro definir uma expressão regular para validação de email:

var regex = /[A-Za-z0-9_.-]+@([A-Za-z0-9_]+\.)+[A-Za-z]{2,4}/;

E agora vamos propor a seguinte string:

var string = ‘Se alguem quiser comprar minha moto por favor encaminhe um email para diegoholiveira@yahoo.com.br’;

Primeiro vou mostrar o metodo match, cujo retorno é exatemente igual do metodo exec do objeto RegExp.

var retorno = string.match( regex );

Observe acima que ao inves de construir a expressão regular como parametro do metodo match eu apenas passei um objeto do tipo RegExp. É importante lembrar que os metodos do objeto RegExp aceitam objetos do tipo String como parametros, e os metodos que usam expressões regulares do objeto String aceitam objetos do tipo RegExp como parametros. Confuso? Imagine isso:

var RegExp.test( String ); // Objeto do tipo RegExp recebendo como parametro um objeto do tipo String

var String.search( RegExp ); // Objeto do tipo String recebendo como parametro um objeto do tipo RegExp

Voltando ao retorno do nosso metodo match, veja que o casamento sempre estará no indice zero e nos demais indices acima de zero estarão os grupos casados.

Agora o metodo search: ele é bem simples, apenas retorna a posição em que ele casou o padrão, ou -1 caso ele não tenha casado o padrão. Neste caso podemos fazer uma condição do tipo:

if (string.search( regex ) != -1) {

        alert( ‘Encontrou um endereço de email no texto’ );

}

Agora um metodo muito legal, o replace. Sem muito o que falar, ele apenas substitui uma padrão casado por outra coisa (string, numero…). Vamos supor que nos queiramos proibir a publicação de emails pessoais, e na string acima esta meu email, neste caso fariamos isso:

alert( string.replace(regex, ‘PROIBIDO DIVULGAR EMAIL’) );

O ultimo metodo da nossa lista, o split. O proposito dele é quebrar uma string onde casar o padrão. Sabendo disso, vamos usa-lo para capturar o dominio de um email. Vejamos:

var email = ‘diegoholiveira@yahoo.com.br’;

var retorno = email.split( /[@]/ );

alert( ‘Dominio é: ‘ + retorno[1]);

Neste caso o retorno da quebra acima seria o array:

array {

        0 => diegoholiveira

        1 => yahoo.com.br

}

É isso. Espero que seja util. E lembre-se, se encontrar erros por ai me avise, pois será importante no meu aprendizado.

PHP.JS – Funções PHP portadas para Javascript

Diego Henrique — Thu, 21 Aug 2008 17:40:27 +0000

Quem programa em PHP já esta acustumado com as funções internas da linguagem e sabe que elas facilitam em muito a vida do desenvolvedor.
Outro dia navegando na internet me deparei com essa biblioteca que porta as funções PHP para Javascript, achei muito interessante poder usar no Javascript as mesmas funções que eu já uso no PHP para tratar strings, manipular array’s e diversas outras coisas.

O melhor é que essa biblioteca tem apenas 41KB (na versão empacotada).

Vejam exemplos e baixem no site do autor: http://kevin.vanzonneveld.net/techblog/category/php2js/