Validação de dados com AJAX.

[PaLobo]

(Antes demais, os moderadores que me perdoem se não coloquei na secção correcta).

Tenho vários forms que preciso de validar. Não tenho muitos conhecimentos de linguagens scripting cliente side, mas queria fazer a validação  dos dados introduzidos antes de enviar para o servidor. Sei que o posso fazer com javascript, mas gostaria de o fazer com AJAX, de forma a que caso não estivesse preenchido, ou então mal preenchido, mudava a cor (ou qualquer coisa do género) do input em causa. caso estivesse tudo bem, enviava os dados via o method = 'post'.

Desculpem-lá se não faz muito sentido...  ?

Fiquem bem,

P.

[karva]

validação como, verificar se ha dados nas caixas de texto?

[PaLobo]

Dois tipos de validação:

- Uns forms têm apenas radio buttons e submit, logo aqui a validação será apenas se estão selecionados os radio buttons, caso não estejam, quero realçar o campo em falta.

- Outros forms já têm texto do estilo nome, morada, etc. Aqui quero validar se os campos estão preenchidos e eventualmente validar o seu conteúdo (ainda não tenho a certeza desta última validação).

Em ambos os casos, quero validar antes de enviar a info via 'post'. Caso esteja incompleta, realce o campo em falta. Pelo pouco que sei, penso que o melhor será AJAX, mas dado ter alguma urgência, gostaria que alguma alma caridosa me indicasse no bom sentido. Talvéz um exemplo para perceber como funciona. Eu depois de perceber, ajusto ao meu código.

Fiquem bem e obrigado,

P.

[seesharptec]

A validação deve ser feita com JavaScript.

O Ajax não é uma linguagem é apenas uma tecnologia baseada em javascript que te permite comunicar com o servidor sem fazer reload das paginas. Pode ser usada para mais algumas coisas, mas a ideia dele é essa.

No fundo são scripts de javascript que fazem esse trabalho.

[PaLobo]

A validação deve ser feita com JavaScript.

O Ajax não é uma linguagem é apenas uma tecnologia baseada em javascript que te permite comunicar com o servidor sem fazer reload das paginas. Pode ser usada para mais algumas coisas, mas a ideia dele é essa.

No fundo são scripts de javascript que fazem esse trabalho.

Thanks. Estive agora a ler umas coisas e apercebi-me disso. A minha pergunta passa a ser então, como fazer isto com Javascript.

Estou também a estudar a possíbilidade de fazer o mesmo com PHP. Já li algures algo parecido, ainda não percebi se dará para o meu caso.

Fico portanto esperançosamente à espera que alguem me ajude a fazer isto com javascript, pois não percebo nada disso. 😞

[seesharptec]

Basicamente vais ter de usar a função

document.getElementById ("Id do Objecto")

Ex:

var opcao= document.getElementById ("opcao1")

Depois verificar as propriedades do mesmos

if (!opcao.checked )

  Alert ("Falta qq coisa");

Quando tipo de objecto temp as suas propriedades dei um exmplo para um radio button

Convêm veres os tutorias de javascript para perceberes melhor

Mas no fundo crias uma função, com o codigo de validação.

void Teste () {

  ...

  return ( True ou False - conforme o resultado da validação )

}

No evento OnSubmit chamas o metodo

[PaLobo]

Obrigado seesharptec. Este fim de semana já vou ver isso!

Continuo no entanto interessado em saber se alguem já consegui fazer este tipo de validação com PHP.

[unsignedint]

Tens também que ter em consideração que o javascript serve para fazer uma "pré" validação dos dados logo no lado do cliente, contudo nunca mas nunca deves contar caso os dados sejam importantes, que eles vêm correctamente validados do lado do cliente, devendo por isso validalos novamente do lado do servidor.

Agora vamos ao assunto que nos trouce aqui, "Ajax" sem duvida uma tecnologia util para apresentar dados ao "cliente" tipo que está a frente do browser sem que este se apercebe que a pagina esteve a trocar dasdos com o servidor, podendo assim actualizar os dados do lado do cliente sem que haja "refresh" (recargamento) pagina.

Lembra-te do seguinte, a forma como o Ajax funciona, o Javascript de uma pagina X envia um pedido a uma pagina Y que corre um dado script, php, asp, perl, cgi, ñ importa, essa pagina Y responde para o Ajax.

Sendo assim vou-te deixar um exemplo apenas a titulo academico que, apenas vai verificar se o login de uma dada pessoa já existe numa pseudo base de dados e caso sim exibe uma seta vermelha, caso contrario uma seta verde.

Aqui tens o codigo para a parte que o cliente vê, index.php:

<html>
<head>
<title>http://www.portugal-a-programar.pt/index.php?showtopic=4101</title>

<script language="javascript" type="text/javascript">

	function createRequestObject() {
		var ro;
		var browser = navigator.appName;
		if(browser == "Microsoft Internet Explorer"){
			ro = new ActiveXObject("Microsoft.XMLHTTP"); // ie
		}else{
			ro = new XMLHttpRequest(); // firefox/safari
		}
		return ro;
	}

	var http = createRequestObject(); // criar um objecto do tipo XMLRequest

	/**
	 * Espa função recebe o valor do formulario e envia o depido para a pagina 'reply.php'
	 * que esta programada para responder aos nossos pedidos
	 */
	function sndReq( username ) {

		if( username.length == 0 ) return; // evitar q seja passado 'vazio' como parametro

			http.open('get', 'reply.php?login='+ username ); // controi o pedido ajax
			http.onreadystatechange = handleResponse; // fica a espera do pedido
			http.send(null); // envia o pedigo

	}

	/**
	 * Esta função tem como principal objectivo processar a resposta enviada 'reply.php'
	 * e apresentar no formulario a resposta propriada.
	 */

function handleResponse() {
	if(http.readyState == 4)
	{
		var response = http.responseText;
		var update = new Array();

		if(response.lenght!=0 ){
			if( response=="0" )
   			  document.getElementById( "loginStatus" ).innerHTML = "<img src='ok.gif' width='25px' />" ;
			else			
			  document.getElementById( "loginStatus" ).innerHTML = "<img src='cancel.gif' width='25px' />" ;
		}//if
	}//if
   }

</script>
</head>
<body>

	<form method="post" action="index.php">
		<table style="border:0px solid #000;">
		<tr>
			<td><input type="text" size="25" value="" onkeyup="sndReq(this.value);"  /></td>
			<td><div id="loginStatus"> </div></td>
		</tr>
		</table>
	</form>

</body>
</html>

 

E agora vamos programar o reply.php é a parte que vai processar o pedido Ajax e responder a quem fez o pedido. Geralmente envolve consultar uma base de dados mas aqui como se trata de um exemplo rudimentar fiquemos por responder que sim '1' que o utilizador 'ana' existe e '0' para todos ou outros utilizadores, logins.

<?php

/**
 * É este o 'scrip' que recebe os pedidos do (ajax) Javascript, agora numa
 * situação normal irias consultar a base de dados usando os dados de entrada
 * e o que gostarias de devolver para a pagina principal basta imprimires para a
 * janela, usando um echo ou printf.
 *
 * Como se trata de um exemplo a titulo academico, vou apenas dizer que o utilizador
 * 'ana' já existe e para todos os outros devolvo '0' ou seja nao existe.
 */

if( isset($_REQUEST['login']) && $_REQUEST['login']=='ana' )
	echo "1";
else echo "0";
?>

 

Agora as imagens:

Remonear a imagem para cancel.gif http://img244.imageshack.us/img244/5153/cancelnh6.gif

Renomear a imagem para ok.gif http://img93.imageshack.us/img93/3445/okqm0.gif

Nota: No exemplo que te dei o Ajax é executado de cada fez que a pessoa larga uma tecla "onkeyup" devias usar algum evento relacionado com o focus, para tentar reduzir o trafego na rede ao maximo.

Fica bem qualquer duvida diz qq coisa.

[PaLobo]

Um enorme obrigado e bem haja unsignedint! A tua explicação e exemplo, para alem de claro foi muito infromativo. Infelizmente para o projecto em mão já não vai a tempo pois tonha urgência e não há problema de ser um pouco rudimentar.

No entanto não foi em vão, pois já tenho outro projecto à espera e esse sim já vai meter muito AJAX, onde este exmplo irá ajudar imenso!

Mais uma vez obrigado e continua com estes excelentes posts.

[spykew]

unsignedint, parabéns pelo exemplo está claríssimo  😛

Exclarece-me só um pormenor, esta linha de código é realmente necessária?

var update = new Array();

Eu acho que não mas tu deves saber melhor.

[djthyrax]

unsignedint, parabéns pelo exemplo está claríssimo  😛

Exclarece-me só um pormenor, esta linha de código é realmente necessária?

var update = new Array();

Eu acho que não mas tu deves saber melhor.

Acho que não. Experimenta com e sem essa linha. 😄

[spykew]

unsignedint, parabéns pelo exemplo está claríssimo  😛

Exclarece-me só um pormenor, esta linha de código é realmente necessária?

var update = new Array();

Eu acho que não mas tu deves saber melhor.

Acho que não. Experimenta com e sem essa linha. 😄

Funciona das duas maneiras, pelo que não deve interferir directamente no script.

Eu queria saber se ele colocou esse código por alguma razão especial ou se simplesmente se esqueçeu de o apagar.

[Knitter]

Não te posso dizer porque é que ele colocou essa linha mas posso dizer-te que iniciar sempre as variáveis é um boa política de programação, mesmo em linguagens onde isso não é preciso.

[unsignedint]

var update = new Array();

Podem remover a linha, esqueci-me de a remover.