Vadidar formularios con ajax php y mysql

 

Validar formularios con ajax php y mysql

Hola amigos en la entrada anterior vimos como validar formularios con ajax de una forma sencilla ya que lo hicimos comprobando un dato que almacenamos en una variable, ahora en esta segunda parte vamos a ver como validar formularios con ajax interactuando directamente con la base de datos.

Ver el ejemplo: Validar formularios con ajax php y mysql

Temas de entradas anteriores relacionados con validar formularios

 

Este tema esta mas actualizadoa

Para poder validar formularios con ajax , php y mysql lo que vamos a necesitar es el código que creamos en la clase anterior y para hacerlo mucho más fácil lo voy a copiar en este nuevo mini tutorial.

Validar formularios con ajax php y mysql

Si te fijaste en el mini-tutorial anterior sobre como validar formularios con ajax te podrás dar cuenta que creamos 3 archivos uno que es el que va a interactuar con el usuario, otro que es el que nos permitirá enviar la información sin que se recargue la pagina y el ultimo es en el que tenemos los datos almacenados con lo cual vamos a comparar lo que escriba el usuario en dicho campo.

Entonces con esto claro empezamos a validar copiar los códigos de los archivos luego explico un lo que hicimos en el archivo validar.php que es al único que le agregamos nueva funcionalidad después todo es lo mismo de antes.

Index.php

<html>
<head>
<meta charset="utf-8"/>
<title>Validar formularios con ajax</title>
<style>
#texto{
    font:"Courier New", Courier, monospace;
    font-size:1em;
    text-align:justify;
    width:95%;
    margin:5px auto;
    height:auto;
    border:solid 1px #DADADa;
    margin-bottom:30px;
    padding:10px;   
    }#user{
    width:200px;
    border-radius:5px;
    border:solid 1px #DADADA;
    padding:10px;
   
    }
#repuesta{
    float:left;
    }
</style>
<link rel="stylesheet" href="live_examples.css" type="text/css"></link>
<script type="text/javascript" src="validar2.js" >
</script>
</head>
<body>
<form name='form1'>
<div id="texto">
<h1>Validar formularios con ajax,php y mysql</h1>
<br />
<br /><h2>Usurios que existe es <font color="#FF0000">webmaster</font> y <font color="#FF0000">administrador</font></h2>
<br />
Nombre de Usuario:<br /> <input type='text' id ='user' name='user' onKeyUp="ejecutarAJAX()">
<div id='respuesta'></div>
<input type='submit' value='procesar'>
</form><br />
</div>
</div>
</body>
</html>

Ahora el archivo validar.js que nos permitirá pasar la información a nuestro archivo validar.php sin que se recargue la pagina.

Vaildar.js

// creamos una variable donde vamos a almacenar los datos de la conexion
var myRequest = getXMLHTTPRequest();
// creamos la funcion que nos validara el navegador
function getXMLHTTPRequest(){
var request = false;
if(window.XMLHttpRequest)
{
  request = new XMLHttpRequest();
} else {
  if(window.ActiveXObject)
  {
    try
    {
      request = new ActiveXObject("Msml2.XMLHTTP");
    }
    catch(err1)
    {
      try
      {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(err2)
      {
        request = false;
      }
   }
  }
}
return request;
}
// creamos la funcion que validara nuestro formulario
function ejecutarAJAX() {
var user=document.forms['form1'].user.value;
var rand=parseInt(Math.random()*99999999)+
new Date().getTime();
var url = "validar.php?user="+user+"&rand="+rand;
myRequest.open("GET", url, true);
myRequest.onreadystatechange = respuestaAJAX;
myRequest.send(null);
}
function respuestaAJAX() {
    if(myRequest.readyState == 4) {
           if(myRequest.status == 200) {
             document.getElementById('respuesta').innerHTML= myRequest.responseText;
        } else {
            document.getElementById('respuesta').innerHTML= myRequest.status;
        }
    }else{
      document.getElementById('respuesta').innerHTML="<img src='untitled.PNG' />";
    }
   
}

Ahora vamos a ver el código de nuestro archivo validar.php que es muy distinto al del tutorial anterior ya que lo que hacemos en este es una conexión a la base de datos.

Validar.php

<?php
error_reporting(E_ALL ^ E_NOTICE);
$servidor = 'localhost'; // sustituir por tu servidor
$usuario = 'root'; // sustituir por el usuario de tu servidor
$clave = ''; // sustituir por la contraseña de acceso de tu servidor
$base_datos = 'noticiero'; // sustituir por el nombre de tu base de datos
$conexion = mysql_pconnect($servidor,$usuario,$clave);
mysql_select_db($base_datos,$conexion);
$query = "SELECT * FROM usuario";
$consulta = mysql_query($query,$conexion);
while($row=mysql_fetch_array($consulta))
{
$nombre  = trim($row['nombre']);
$user= trim($_GET['user']);
if($user==$nombre){
    $existe = '<font color="#FF0000">El usuario ya existe..!</font>';
        }else{
        $no_existe = '<font color="#009900">Usuario Disponible..!</font>';
    }
}mysql_free_result($consulta);
if($existe == true){
    echo $existe;
}elseif($user==''){
    echo 'Escribe un nombre..!';
     }else{
        echo $no_existe;
        }
?>

Tal vez ya te hayas dado cuenta que es el mismo código del mini-tutorial anterior sobre validar formularios con ajax, bueno déjame decirte que si es el mismo ya lo mencionábamos mas arriba solo que en esta parte el archivo validar.php es muy diferente al anterior es el único que cambia después todos siguen iguales.

El archivo php se divide en 3 partes que son conexión a base de datos, consulta a base de datos y comparar los datos con el recibido del formulario.

Bueno con todo explicado solo te quedas analizar el código del archivo php y si quieres implementarlo en su sitio web ya que es una forma muy elegante y a demás profesional para la validación de datos en tiempo real.

Deja un comentario

Tu dirección de correo electrónico no será publicada.