» Início » Desenvolvimento » Ajax » Aplicando AJAX com PHP, parte 2 - Combos e validação de formulário

Avaliação: Não avaliado | Publicado em: 18/10/2007

Aplicando AJAX com PHP, parte 2 - Combos e validação de formulário

Alfred Reinold Baudisch Desenvolvedor web freelance, com atuação na área há 7 anos. Experiência avançada em PHP, SQL e modelagem de sistemas multi-camadas. Atualmente dedicado ao aprendizado em desenvolvimento mobile, especificamente mobile games, com J2ME. Apaixonado e conhecedor do mercado financeiro, gestão e estratégias de novos negócios, visão constantemente empreendedora.

4. Funções JavaScript de Validação e Tratamento de Erros
E agora, talvez a parte mais complexa, as funções JavaScript que recebem os dados do formulário, enviam para o PHP, recebem o retorno, processam este retorno e efetuam alguma ação.

Eis que finalmente, validacao.js:
<?
// Cria objeto CPAINT
var cp = new cpaint();
cp.set_transfer_mode('POST');
cp.set_response_type('TEXT');

// ------------------------------------
// GERAL
// ------------------------------------
var erroEmail = false;
var erroFabricante = false;
var erroPreco = false;

function verificaForm(form)
{
    if(erroEmail || erroFabricante || erroPreco ||
       form.email.value == '' || form.fabricante.value == 0 ||
       form.modelo.value == 0 || form.preco.value == '')
    {
        alert('Preencha todos os campos corretamente!');
        return false;
    }

    return true;
}
// ------------------------------------

// ------------------------------------
// E-MAIL
// ------------------------------------
// Valida e-mail fornecido
function verificaEmail()
{
    // Obtém valor digitado
    valor = document.getElementById('email').value;

    // E-mail em branco? Faz validação direta em Javascript
    if(valor == '') {
        document.getElementById('email_erro').innerHTML = 'Preencha
 o E-mail';
        erroEmail = true;
    }
    // OK, e-mail preenchido, chama PHP e valida
    else
    {
        // PRINCIPAL MÉTODO (call) = Chama o PHP e obtém o retorno
        cp.call('validaFormulario.php', 'verificaEmail', 
retornaEmail, valor);
    }
}

// Obtém o retorno da validação feita em AJAX e processa-o
function retornaEmail(retorno)
{
    // Se teve algum retorno após verificar o e-mail,
    // significa erro, portanto imprime-o.
    if(retorno) {
        document.getElementById('email_erro').innerHTML = retorno;
        erroEmail = true;
    }
    else {
        document.getElementById('email_erro').innerHTML = '';
        erroEmail = false;
    }
}

// ------------------------------------

// ------------------------------------
// FABRICANTES & MODELOS
// ------------------------------------
function carregaModelos(campo)
{
    fabricanteId = campo.value;

    // Nenhuma fabricante foi selecionada. Caso houvesse alguma
    // seleção
    // anterior, limpa. Pois não há modelo para fabricante 0.
    if(fabricanteId == 0) {
        document.getElementById('modelos_local').innerHTML = 
'Selecione um Fabricante';
        // Limpa os erros, caso ocorreu antes dessa boa seleção
        document.getElementById('fabricante_erro').innerHTML = '';
    }

    // Chama PHP para carregar modelos da fabricante selecionada
    else
        cp.call('validaFormulario.php', 'obtemModelos', 
retornaModelos, fabricanteId);
}

function retornaModelos(retorno)
{
    // Nenhum modelo encontrado
    if(retorno == 'N') {
        document.getElementById('fabricante_erro').innerHTML = 
'Nenhum Modelo para esse fabricante. Selecione outro';
        // Limpa modelos anteriores, já que agora selecionou
        // uma fabricante vazia
        document.getElementById('modelos_local').innerHTML = 
 'Selecione um Fabricante';

        erroFabricante = true;
    }

    // Ok, há modelos para o fabricante
    else {
        document.getElementById('modelos_local').innerHTML =
retorno;
        // Limpa os erros, caso ocorreu antes dessa boa seleção
        document.getElementById('fabricante_erro').innerHTML = '';

        erroFabricante = false;
    }
}

// ------------------------------------

// ------------------------------------
// PREÇO
// ------------------------------------
function verificaPreco()
{
    // Obtém valor digitado
    valor = document.getElementById('preco').value;

    // Preço em branco? Faz validação direta em Javascript
    if(valor == '') {
        document.getElementById('preco_erro').innerHTML = 
'Preencha o Preço';
        erroPreco = true;
    }
    // OK, preço preenchido, chama PHP e valida
    else
    {
        cp.call('validaFormulario.php', 'verificaPreco',
retornaPreco, valor);
    }
}

// Obtém o retorno da validação feita em AJAX e processa-o
function retornaPreco(retorno)
{
    // Se teve algum retorno após verificar o preço,
    // significa erro, portanto imprime-o.
    if(retorno) {
        document.getElementById('preco_erro').innerHTML = retorno;
        erroPreco = true;
    }
    else {
        document.getElementById('preco_erro').innerHTML = '';
        erroPreco = false;
    }
}
// ------------------------------------

?>

Dissecando validacao.js:

1. Cria-se o objeto CPAINT.
    
   
2. Na seção GERAL, declara-se as variáveis que serão flags (indicadores) de que há um erro atualmente em algum campo que foi tratado via Ajax.
   var erroEmail = false;
var erroFabricante = false;
var erroPreco = false;
   Esses flags são ligados/desligados pelas funções relacionadas. Exemplo: a função que trata o e-mail, controla a erroEmail.
    
   
3. A função verificaForm(form) é chamada quando o formulário é enviado (conforme vimos anteriormente, o formulário possui um onSubmit). Caso alguma flag de erro esteja ligada (com valor true, no caso), ou caso algum campo não tenha sido preenchido, a função retorna false, e o formulário não é enviado.
    
   
4. A verificaEmail() é chamada quando o usuário sai do campo de e-mail (onBlur). Ela obtém o valor do campo e caso não preenchido, retorna uma mensagem de erro no span do campo e-mail, bem como ativa a flag de erro do e-mail: erroEmail = true;.
    
   
5. Caso o e-mail for preenchido, a chamada AJAX é feita:
   cp.call('validaFormulario.php', 'verificaEmail', 
retornaEmail, valor); - em ordem de parâmetro: arquivo PHP que é chamado e possui integração com a CPAINT; chama a verificaEmail no PHP; no retorno a função JavaScript retornaEmail é chamada; e o valor (que contém o e-mail) é enviado ao PHP.
    
   
6. Se retornaEmail(retorno) receber algo, quer dizer que houve erro (porque a função PHP chamada, verificaEmail() no caso realmente só retorna mensagens de erro). Nesse caso, ela cuida de exibir no span do campo e-mail, bem como de ativar a flag de erro. Veja que caso nada é retornado, ela desativa a flag. Desativar a flag ali é de extrema importância, pois algum erro pode ter ocorrido alteriormente.
    
   
7. O funcionamento da verificaPreco() e retornaPreco(retorno) é o mesmo, logo não as explicarei.
    
   
8. Caso carregaModelos(campo) receba um valor 0 (zero), ou seja, o usuário escolheu a opção "Selecione", deve-se limpar a antiga seleção de modelos, e mostrar a mensagem de seleção novamente. Caso alguma fabricante foi escolhida, chama o PHP. Como visto na dissecação do validaFormulario.php, a função obtemModelos retorna o HTML com o combo com os modelos.
    
   
9. retornaModelos(retorno) verifica se o valor for N, quer dizer que não há modelos para a fabricante, logo ativa flag de erros, e mostra mensagem de acordo. Caso o retorno seja diferente, quer dizer o HTML com o combo de modelos, logo coloca-o no local certo no formulário e desativa a flag de erros.

5. Fim! E a parte 3?
Veja que a lógica e estrutura para AJAX é sempre a mesma:

1. Biblioteca PHP que trata dados enviados e retorna para o CPAINT;
2. Biblioteca JavaScript que obtém dados do usuário, envia para a CPAINT, obtém o retorno e o processa.

A maioria das suas funções agora será na base do Copiar e Colar, apenas com adaptação da validação/retorno de acordo com o dado sendo processado.

Ajax é só isso? Não. Vai muito muito muito além disso tudo. Mas, para a série de artigos, só falta mais uma parte: respostas complexas e completas com XML. Esse é o tema da parte 3, que será publicada exclusivamente no meu blog O Desenvolvedor PHP, portanto fique antenado!

Meu muito obrigado pela leitura desse artigo. Saí da toca e resolvi escrever!

OBS 1: Cuidado, AJAX vicia. :)

Abraços,
Alfred Reinold Baudisch

Blogs:
O Desenvolvedor PHP
www.auriumsoft.com.br/desenvolvedorphp

Jornada Imperial
www.auriumsoft.com.br/blog

THE Mobile Developer
http://mobiledeveloper.auriumsoft.com

Páginas: « Anterior 1 2 3 Próximo » 

• artigo_ajaxpt02_src.zip