CakePHP validando formulários em Ajax com jQuery

Ajax, CakePhp, Geral, Jquery, PHP | 27 Nov 2010

Buenas!
essa semana ou semana passada não lembro, o ricardo negri me falou.
- seria legal se tivesse um script genérico para validar forms por ajax.
bem então aqui estamos.

Iremos realizar a validação de qualquer form com cakephp 1.3, via ajax ou do modo tradicional.

Primeiro vamos criar nosso model com as validações.
app/model/contact.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<?php

class Contact extends AppModel {

public $useTable = false;
public $validate = array(
'nome' => array(
'rule' => 'notEmpty',
'message' => 'Campo de preenchimento obrigatório'
),
'email' => array(
'valido' => array(
'rule' => 'email',
'message' => 'Informe um email válido'
),
'obrigatorio' => array(
'rule' => 'notEmpty',
'message' => 'Campo de preenchimento obrigatório'
)
),
'assunto' => array(
'rule' => 'notEmpty',
'message' => 'Campo de preenchimento obrigatório'
),
'msg' => array(
'rule' => 'notEmpty',
'message' => 'Campo de preenchimento obrigatório'
)
);

}

?>

segundo vamos criar o controller com as verificações de cada tipo de requisição.

Obs: dar uma olhada no component RequestHandler que faz a verificação do tipo de requisição.

app/controllers/contacts_controller.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?php

class ContactsController extends AppController {

public $uses = array('Contact');
public $helpers = array('Javascript');
public $components = array('RequestHandler');

function index() {
//caso a requisição for AJAX
if ($this->RequestHandler->isAjax()) {
//define debug como 0 para retornar o json
Configure::write('debug', 0);
if ($this->Contact->save($this->data)) {
//seta mensagem de sucesso
$this->Session->setFlash('Dados enviados com sucesso!', 'default', array('class' => 'success'));
//importamos o helper html para o redirecionamento
App::import('Helper', 'Html');
$html = new HtmlHelper();
//redirecionamos o usuario quando ocorrer sucesso.
die(json_encode(array('success' => $html->url("/contacts/",true))));
} else {
//retorna os campos inválidos
die(json_encode(array('error' => $this->Contact->invalidFields())));
}
$this->autoRender = false;
exit();
} else {
//requisição normal via POST
if (!empty($this->data)) {
if ($this->Contact->save($this->data)) {
$this->Session->setFlash('Dados enviados com sucesso!', 'default', array('class' => 'success'));
//redireciona
$this->redirect("index");
} else {
$this->Session->setFlash('Verifique os campos em destaque', 'default', array('class' => 'error'));
}
}
}
}

}

?>

Bem o que temos nesse controller é:

verificação da requisição se é via POST ou AJAX com isso aplicamos nossa validação por AJAX caso o usuário tiver o javascript habilitado e via POST caso o usuário não tiver o javascript habilitado.

Terceiro criação da view de contato.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php echo $javascript->link('http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'); ?>
<?php echo $javascript->link('index'); ?>

<?php echo $form->create('Contact'); ?>
<fieldset>
<legend>Contato</legend>
<?php
echo $form->input('nome', array('id' => 'nome'));
echo $form->input('email', array('id' => 'email'));
echo $form->input('assunto', array('id' => 'assunto'));
echo $form->input('msg', array('id' => 'msg', 'type' => 'textarea'));
?>
</fieldset>
<?php echo $form->end('Enviar'); ?>

Obs: colocar o id do campo com o mesmo nome do campo na criação dos fields.

Por último temos nosso javascript que irá realizar a exibição dos campos inválidos quando houver ou o redirecionamento para a página de sucesso.

app/webroot/js/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

jQuery(function($){
/**
* formulário submete os dados para o controller e retorna os campos inválidos via json.
* Quando os campos estiverem válidos redireciona o usuário com a mensagem de sucesso.
**/
$('form').submit(function(){
var query = $(this).serialize();
//posta os dados para a action definida no form
$.post($(this).attr('action'),query, function(data) {
if(!data.success){
//remove erros anteriores
$(".error-message").remove();
$.each(data.error,function(i,v){
//adiciona erro para cada campo inválido
var msg = '<div class="error-message">'+ v +'</div>'
$("#" + i).after(msg);
})
}else{
//redireciona o usuario
window.location = data.success;
}
},'json');
return false;
})
});

Bem eras isso, espero ter ajudado a galera que curte firulas de ajax hehehehe.

Poste suas dúvidas,sugestões ou críticas…

Jquery problemas com $.load() + Internet Explorer Opá! essa feature do IE é incrível e penosa, pois...
Classe Validation dentro do model Ioaaaa! primeiro post do ano, bem semana passada fui realizar...
CakePHP sobrescrevendo mensagens de erro + Multimensagens por field Oiaaa!! bem essa semana fui implementar um form e este...
Como implementar comet com php Buenas!!! hj vou falar sobre Comet (ajax reverse,Ajax Push,comet ou...

Related posts plugin by:Related posts plugin

Start earning money online in one hour visit:Ways to make money.

Tags: Ajax, Cakephp, Jquery, Validação

About the Author: Garcia

Meu nome é Luan Garcia. Trabalho desde 2008 como desenvolvedor, atuando nas áreas de modelagem, analise e integrações de e-commerces. Trabalho atualmente na empresa Reweb com desenvolvimento de produto e integrações. Fascinado por internet e soluções, criei este blog para compartilhar um pouco de conhecimente e receber sugestões sobre as soluções postadas aqui. Buenas...

2 Comments

Newer Comments »

Ricardo Negri

28/11/2010 at 3:41 pm

Parabéns Luan, excelente explanação sobre o assunto. Como sugestão, seria criar uma classe pro js, afins, de não conflitar com outros forms da página, e gerenciar os loadings e retornos.
Abraço.

Reply