Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

JosMiguel

Validação de formulário Ajax+php

Mensagens Recomendadas

JosMiguel

Boas.

precisava de ajuda na validação de um formulário.

então é o seguinte:

após preenchido o formulário, ele é enviado por ajax (metodo POST, xmlhttp.send(JSON)) para uma pág PHP onde faz a validação dos dados recebidos. De seguida ele retorna um array, em formato JSON, onde contem informação dos dados que não passaram na validação. algo como isto:

[{"id":"mailInput","erro":"mailErrado"},{"id":"val2","erro":"contribuinteErrado"},{"id":"val1","erro":"telfErrado"}].

a partir daqui o pretendido é pegar na informação do array, mais concretamente o value do "id" para alterar o aspecto visual das input box do formulário. algo como isto:

document.getElementById(response.id).style.border='2px solid red';

a dúvida resume-se em não compreender porque ele não consegue executar essa alteração. algo de errado se passa após recepção dos dados no lado do ajax.

aqui fica o código para analisarem:

obrigado.

<script>
function insertData(div_a_preencher)
{
var conteudo = getConteudo(); //JSON.stringify(saveValues);
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{

/*
recebe => [{"id":"mailInput","erro":"mailErrado"},{"id":"val2","erro":"contribuinteErrado"},{"id":"val1","erro":"telfErrado"}]
formato =>{"id":"id da div a usar", "erro":"nome do erro"}
*/
var response = JSON.parse(xmlhttp.responseText);

var soma = Object.keys(response);
for (i=0; i<soma.length; i++)
{
 document.getElementById(response[i].id).style.border='2px solid red';
}
//document.getElementById(div_a_preencher).innerHTML=xmlhttp.responseText;
}
else
{
document.getElementById(div_a_preencher).innerHTML="Um erro ocorreu: " + xmlhttp.statusText;
/* var headers = xmlhttp.getAllResponseHeaders ();
alert(headers); */
}
}
xmlhttp.open("POST", 'insereContacto.php', true);
xmlhttp.setRequestHeader( "Content-Type", "application/json" );
xmlhttp.send(conteudo);
}
</script>

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
I-NOZex

Não. ele está a funcionar. Apenas não estou a ver como tratar os dados recebidos pelo php.

ahhh

ya faz o que o yoda disse, usa um depurador js

na seguinte linha:

for (i=0; i<soma.length; i++)
{
	 document.getElementById(response[i].id).style.border='2px solid red';
}

adiciona isto

for (i=0; i<soma.length; i++)
{
	 console.log(response[i].id);
	 document.getElementById(response[i].id).style.border='2px solid red';
}

e ve na consola o que aparece


B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

aparece-me estes erros. deve ser no JSON.parse()

result.png

o erro não é na função mas sim no conteúdo ques a função está a tentar processar

por outras palavras:

Usa o Firebug / Chrome Inspector para verificar se algo de errado acontece no pedido ajax.


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
JosMiguel

O conteudo é passado pelo php:

onde $retorno é um array.

echo json_encode($retorno);

vem exatamente como referi anteriormente.

[{"id":"mailInput","erro":"mailErrado"},{"id":"val2","erro":"contribuinteErrado"},{"id":"val1","erro":"telfErrado"}]

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.