Validar Formularios Con Ajax

Validar formularios con ajax de una forma fácil y rapida

Hola amigos como están, en esta nueva entrada vamos a ver como validar formularios con ajax de una forma fácil y rápida. Lo que vamos hacer es a crear un formulario donde el usuario al ir introduciendo su nombre nuestro script valla reconociendo si dicho nombre existe o no.

Ver ejemplo: Validar formularios con ajax

Este tema esta mas actualizado

 

Temas de entradas anteriores relacionados con validar formularios

Validar formularios con ajax puede sernos de mucha ayuda sobre todo queremos reducir tráfico en el servidor, lo que vamos hacer es mostrarle un mensaje al usuario si dicho usuario que está escribiendo existe o no existe.

Validar formularios con ajax

Vamos a copiar el primer código de nuestro formulario con ajax que como siempre es el HTML.

Index.html

<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="validar.js" >
</script>
</head>
<body>
<form name='form1'>
<div id="texto">
<h1>Validar formularios con ajax</h1>
<br />
<br /><h2>Por ahora el usurio que existe es <font color="#FF0000">pedro</font> y <font color="#FF0000">santiago</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 lo que vamos hacer es crear nuestro código ajax que nos procesara dicho formulario sin que tengamos que recargar la pagina para ello colocamos el código del archivo validar.js.

Validar.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' />";
    }
  
}

Si te fijas en esta parte lo que hacemos es pasar todas las peticiones por debajo del protocolo HTTP lo que nos permite darla una funcionalidad dináca a nuestra autentificación de formularios usando esta conbinación de lenguajes de programaicón como lo es javaScript y PHP, con esto optenemos un codigo super avanzado para validar formularios con ajax.

Ahora vamos a crear el archivo validar.php que es el cual se encargara de recibir los datos que le envie el archivo validar.js y este es el que se encargar de comprobar si el nombre introducido existe ya sea en la base de datos o en una variable.

Validar.php

<?php
$usuario = 'pedro';
$user=$_GET['user'];
if($user==$usuario){
    echo '<font color="#FF0000">El usuario ya existe..!</font>';
    }elseif($user=='santiago'){
        echo '<font color="#FF0000">El usuario ya existe..!</font>';
    }else{
    echo '<font color="#009900">Usuario Disponible..!</font>';
    }
?>

Bueno con esto termina el pequeño tutorial sombre como validar formularios con ajax si se fijan no es nada difícil solo es cuestión de modificar el código para conseguir lo que queremos, claro que aquí yo valide todo almacenando el valor a comparar en una variable, en la próxima entrada vamos a ver como procesar este mismo formulario comparando los resultados con lo que tengamos en una base de datos.

Bueno será hasta la próxima entrada donde veremos el tema de validar formularios con ajax,php y mysql.

Comments

  1. By Anónimo

Deja un comentario

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