Formulario com validação em Ajax

[Gustavo Nunes 0]

Segue um tuto de validação de campos por ajax.

 

1º - Crie uma tabela no banco de dados com o nome:"usuarios" e os campos: id,nome,login,senha,email

 

2º pagina Cadastro.php

<script type="text/javascript" src="ajax.js"></script>

<table width="580" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td width="580" height="177" align="center"><form name="form1" method="post" action="?p=9&r=<?=$_GET[r]; ?>"><table width="545" border="0" cellspacing="4" cellpadding="0">
       <tr>
         <td width="129" class="style17">Email</td>
         <td class="style17"><input name="email" type="text" id="email" size="30" ></td>
         <td class="style17"></div></td>
       </tr>
       <tr>
         <td class="style17">Repetir Email</td>
         <td width="180" class="style17"><input name="reemail" type="text" id="reemail" size="30" onblur="validarDadosDois('reemail', document.getElementById('email').value, document.getElementById('reemail').value );"></td>
         <td width="220" class="style17"><div id="campo_reemail"></div></td>
       </tr>
       <tr>
         <td class="style17">Login</td>
         <td colspan="2" class="style17"><table width="406" border="0" cellspacing="4" cellpadding="0">
           <tr>
             <td width="144"><input name="login" type="text" id="login" onBlur="validarDados('login', document.getElementById('login').value);"></td>
               <td width="250"><div id="campo_login"></div></td>
             </tr>
           </table></td>
         </tr>
       <tr>
         <td class="style17">Senha</td>
         <td colspan="2" class="style17"><input name="senha" type="password" id="senha"></td>
       </tr>
       <tr>
         <td class="style17">Repetir Senha</td>
         <td colspan="2" class="style17"><table width="414" border="0" cellspacing="0" cellpadding="0">
           <tr>
             <td width="144"><input name="resenha" type="password" id="resenha" onBlur="validarDadosDois('resenha', document.getElementById('senha').value, document.getElementById('resenha').value );"></td>
               <td width="258"><table width="100%" border="0" cellspacing="5" cellpadding="0">
                 <tr>
                   <td><div id="campo_resenha">
                     </div></td>
                 </tr>
               </table></td>
             </tr>
           </table>        </tr>
       <tr>
         <td> </td>
         <td colspan="2">
           <input type="submit" name="Submit" value="Cadastrar"></td>
       </tr>
       </table>
     </form></td></tr>
</table>

 

3º - Pagina ajax.js

 

var req;

function validarDados(campo, valor) {

if(window.XMLHttpRequest) {
	req	= new XMLHttpRequest();
}
// Internet Explorer
else if(window.ActiveXObject) {
	req = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "validacao.php?campo="+campo+"&valor="+valor+"&email="+email;
req.open("Get", url, true); 
  	req.onreadystatechange = function() {
	if(req.readyState == 1) {
		document.getElementById('campo_' + campo + '').innerHTML = '<font color="gray">Verificando...</font>';
	}
	if(req.readyState == 4 && req.status == 200) {   
		var resposta = req.responseText;
		document.getElementById('campo_'+ campo +'').innerHTML = resposta;
	}
}
req.send(null);
}
function validarDadosDois(campo, valor, email) {

if(window.XMLHttpRequest) {
	req	= new XMLHttpRequest();
}

else if(window.ActiveXObject) {
	req = new ActiveXObject("Microsoft.XMLHTTP");
}

var url = "ajax/validacao.php?campo="+campo+"&valor="+valor+"&email="+email;
req.open("Get", url, true); 
req.onreadystatechange = function() {
	if(req.readyState == 1) {
		document.getElementById('campo_' + campo + '').innerHTML = '<font color="gray">Verificando...</font>';
	}
	if(req.readyState == 4 && req.status == 200) {
		var resposta = req.responseText;
		document.getElementById('campo_'+ campo +'').innerHTML = resposta;
	}

}

req.send(null);

}

 

4º - pagina validacao.php

 

<?php
$campo = $_GET['campo'];
$valor = $_GET['valor'];
$email=$_GET['email'];

// Verificando o campo login
if ($campo == "login") {
include("dbconfig.php");
$p=mysql_query("SELECT * FROM usuarios WHERE login='$valor'");
$c=mysql_num_rows($p);

if (strlen($valor) > 28) {
	echo "<img src='imagens/erro.gif' border='0'> <font color='#FF0000'><b>O login deve ter no máximo 28 caracteres.</b></font>";				
} elseif (strlen($valor) < 4) {
	echo "<img src='imagens/erro.gif' border='0'> <font color='#FF0000'><b>O login deve ter no minímo 4 caracteres.</b></font>";		
} elseif (!preg_match('/^[a-z\d_]{4,28}$/i', $valor)) {
	echo "<img src='imagens/erro.gif' border='0'> <font color='#FF0000'><b>O login deve conter somente letras e numeros.</b></font>";
} elseif($c!=0){
	echo "<img src='imagens/erro.gif' border='0'> <font color='#FF0000'><b>Usuário já cadastrado.</b>";
} elseif($c==0){
	echo "<img src='imagens/ok.gif' border='0'> <font color='#00CC33'><b>Usuário disponivel!</b></font>";
}

}

// Verificando o campo email
if ($campo == "email") {

if (!eregi("^[a-z0-9_\.\-]+@[a-z0-9_\.\-]*[a-z0-9_\-]+\.[a-z]{2,4}$", $valor)) {
	echo "<img src='imagens/erro.gif' border='0'> <font color='#FF0000'><b>Preencha com um email válido!</b></font>";
}

}

// Verificando o campo CPF
if ($campo == "reemail") {

if($valor!=$email){
	echo "<img src='imagens/erro.gif' border='0'> <font color='#FF0000'><b>Repetição de email incorreta.</b></font>";
} 
}


// Verificando o campo CPF
if ($campo == "resenha") {

if($valor!=$email){
	echo "<img src='imagens/erro.gif' border='0'> <font color='#FF0000'><b>Repetição de senha incorreta.</b></font>";
} 
}

// Acentuação
header("Content-Type: text/html; charset=ISO-8859-1",true);
?>

 

5º - Não esqueçam da pagina dbconfig.php

 

$host = "localhost"; //O host do seu servidor, geralmente localhost
$user = "root"; //O usuario do seu BD
$pass = ""; // A SENHA do seu BD
$base = "tabela"; //A TABELA que você cadastrou

$conn = @mysql_connect($host, $user, $pass) or die ("<br><br><center><font size=2 color=red face=verdana><b>Problemas ao conectar no servidor:<br><br><i>" . mysql_error() . "</i></b></font></center>");
$banco = @mysql_select_db($base) or mysql_create_db($base);mysql_select_db($base) or die ("<br><br><center><font size=2 color=red face=verdana><b>Problemas ao criar banco:<br><br><i>" . mysql_error() . "</i></b></font></center>");
@session_start();

 

Essa é somente a parte de validação de campos, sem a parte de cadastro dos dados em banco de dados....

 

Qualquer problema, é só perguntar =]

[Good 4]

Hm.. esse código você pegou em outro lugar.. mas.. vou voltar ao que eu queria..

 

 

tem como complementar com uma verificação captcha seguro?

 

alguém faça ae por favor..

 

 

um código pra criar a imagem..

 

<?
session_start();

create_image();
exit();

function create_image()
{
    $md5_hash = md5(rand(0,999));
    $security_code = substr($md5_hash, 15, 6);

    $_SESSION["security_code"] = $security_code;

    $width = 100;
    $height = 20;

    $image = ImageCreate($width, $height);

    $white = ImageColorAllocate($image, 255, 255, 255);
    $black = ImageColorAllocate($image, 0, 0, 0);
    $grey = ImageColorAllocate($image, 204, 204, 204);

    ImageFill($image, 0, 0, $black);

    ImageString($image, 3, 30, 3, $security_code, $white);

    ImageRectangle($image,0,0,$width-1,$height-1,$grey);
//    imageline($image, 0, $height/2, $width, $height/2, $grey);
//    imageline($image, $width/2, 0, $width/2, $height, $grey);

    header("Content-Type: image/png");

    imagepng($image);

    ImageDestroy($image);

}
?>

vlw