+1

Prototype: validações em formulários com AJAX

criado por Davis Zanetti Cabral em 29/07/2007 4:15pm
É algo simples, mas que acaba com o problema de ter que ficar refazendo funcionalidade que já é nativa.

Antes de eu começar a trabalhar assim, eu tinha uma requisição no AJAX para uma página (rpc.php) onde eu enviava os dados do formulário usando o seguinte código:

Processo = {    
    acao: false,
    salva: function() {
        if (Processo.acao) {
            return false;
        }
        Processo.acao = true;
        var pars = 'action=salva_processo';
        pars += '&' + Form.serialize('processo_form');
        var opt  = {
            method: 'post',
            postBody: pars,
            on404: on404Function,
            onFailure: onFailureFunction,
            evalScripts: true,
            onComplete: function() {
                Processo.acao = false;
            },
            onSuccess: function(t) {
                if (t.responseText == 'ok') {
                    setTimeout("Processo.filtra();", 0);
                    Element.remove('formulario_processos');
                } else {
                    alert(t.responseText);
                }                
            }
        }
        new Ajax.Request(url, opt);
        return false;
    }
}

Não vou explicar o código acima, vou bater apenas na tecla que comentei: validações. Mas um detalhe que gostaria de compartilhar, é o setTimeout ali no onSuccess. Eu o coloquei, pois não conseguia fazer uma requisição XHR no evento onComplete/onSuccess, com isso eu contornei o problema. Se alguem souber uma forma de resolver isso, eu agradeço.

Agora digamos, que no envio desse processo, o script PHP teria que fazer uma análise no banco, para saber se o processo pode ser gravado (validação server-side), e nessa análise, nossa inserção foi considerada inválida. Veja o trecho abaixo:

onSuccess: function(t) {
    if (t.responseText == 'ok') {
        setTimeout("Processo.filtra();", 0);
        Element.remove('formulario_processos');
    } else {
        alert(t.responseText);
    }
}

Nesse trecho eu verifiquei se a string de retorno foi "ok". Caso sim, ele continua com o processo, remove o formulário e recarrega a lista de processos. Mas tem um "senão" ali, que faz um alerta. Esse alerta é apenas para debug, para casos de erros que não devem acontecer (mas geralmente acontecem).

No arquivo PHP, para indicar que houve falha na validação eu coloco:

<?php
header('HTTP/1.1 500 Internal Server Error');
$msg = 'Houve algum erro e o processo nao pode ser salvo!';
$msg .= ' Reveja os dados e tente novamente!'
die($msg);
?>

Com um cabeçalho de Internal Server Error a prototype identifica o problema e retorna um alerta com a mensagem. Por isso que meu alerta é apenas para mostrar mensagens que possam ser causadas por erro no script.

Não é algo que diga: nossa, sou uma nova pessoa depois desse artigo. Não é mesmo, mas para quem tá começando pode ser uma mão para começar a ler os fontes para pegar esses detalhes.

Comentários:

Mostrando 1 - 2 de 2 comentários
Olá Helton,

A idéia foi mostrar como pode ser realizada a validação utilizando recursos nativos da prototype.

Dessa maneira que mostrei, a validação fica sempre no lado do servidor, se o usuário não tiver javascript habilitado, ele submete o formulário normalmente e a validação ocorre como era pra ser.

Eu prefiro aumentar um pouco o tráfego na rede, do que repetir um processo que pode ser único, como o caso de algumas validações. Mas vai do gosto do freguês e da possibilidade.
04/08/2007 11:56am (~9 anos atrás)

Olá,penso da seguinte forma, primeiro faço validação usando javascript mesmo, sem ajax, depois também valido sem ajax no servidor, porque pode ser que o usuário tenha desabilitado a execução de JavaScript... preciso me garantir. Mas dessa forma se a pessoa não tem suporte a JavaScript ele não faz nem uma e nem outra validação... o furo é maior ainda, não tem-se mais nenhuma validação. Isso que está fazendo não precisa de AJAX. Estou enganado? se alguém puder... esclareça-me por favor. Valeu pessoal.
03/08/2007 6:08pm (~9 anos atrás)

Novo Comentário:

(Você pode usar tags como <b>, <i> ou <code>. URLs serão convertidas para links automaticamente.)