+1
Prototype: validações em formulários com AJAX
É 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:
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:
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:
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.
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á,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
(~16 anos atrás)
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.