Validar formularios Web con Ajax

baluart10 Mayo 2006 - 6:22pm 19 comentarios
Enviar por Email Imprimir

Los formularios web son probablemente la manera más fácil y común de enviar información desde nuestro computador (como usuarios) hacia el servidor. Por ello, muchas veces debemos establecer ciertas medidas que eviten los errores al procesar los datos. Una de esta medidas de validación la podemos lograr con Ajax.

Vía ajaxian, llego a este útil tutorial que nos explica como utilizar la librería Prototype para crear fácil y rápidamente la validación de formularios web con ajax.

La página del autor nos deja un ejemplo de lo excelente que queda el formulario web, por supuesto con algo de CSS.

Tutorial | Really easy field validation with Prototype

Comentarios

Imagen de Scrambler
Scrambler

Creo que es la primera vez que posteo, y creo que ya era hora, digasemos que la lectura diaria (varias veces al dia) de tu bloc me ha ayudado muchisimo para poder entender Ajax y saber aplicarlo, solo darte las gracias por esta ayuda!!!

Imagen de Scrambler
Scrambler

Una pregunta, he visto la misma funcion pero no hacia falta tocar el submit para validar el formulario si no al salir del textbox entoces validaba, alguna idea?

Imagen de Balú

Hola Scrambler, una validación sin tocar el submit no la he visto, incluso yo uso desde hace mucho tiempo una validación muy parecida a la del post, pero igual requiero del submit.Por otra parte, si consigues el enlace al formulario te agradecería. También he estado buscando material al respecto. Saludos.

Imagen de javier oswaldo
javier oswaldo

hye amigos como puedo validar un campo con ajax de tal manera que no se salga de el hasta que tenga una calificacion entre 5 y 10 les agradesco su ayuda
:)

Imagen de javier oswaldo
javier oswaldo

hola amigos saben que tengo un prob como validar un campo donde va una calificacion pero el chiste es que me lo marque o que no me permita salir de el hasta que ponga una calificacion mayor que 5 y menor que 10 me han dicho que con ajax sale facil...facil? la verdad no entiendo ajax alquien qe me pueda ayudar? gracias...

Imagen de Anonymous
Imagen de Anonymous
Anonymous

necesito implementer AJaX con código PHP para realizar validación de usuario, búsqueda de clientes y productos sin utilizar botón submit y en tiempo real.Muchas grasias me serviria mucho su ayuda

Imagen de traza, diseño web
Imagen de onlysystem.com

2 Luego crear un archivo .js

------------------------------------
// Variables para setear
onload=function()
{
cAyuda=document.getElementById("mensajesAyuda");
cNombre=document.getElementById("ayudaTitulo");
cTex=document.getElementById("ayudaTexto");
divTransparente=document.getElementById("transparencia");
divMensaje=document.getElementById("transparenciaMensaje");
form=document.getElementById("formulario");
urlDestino="mail.php";

claseNormal="input";
claseError="inputError";

ayuda=new Array();
ayuda["Nombre"]="Ingresa tu nombre. De 4 a 50 caracteres. OBLIGATORIO";
ayuda["Empresa"]="Ingresa el nombre de tu Empresa. De 4 a 50 caracteres.";
ayuda["Telefono"]="Ingresa un teléfono de contacto.";
ayuda["Correo"]="Ingresa un e-mail válido. OBLIGATORIO";
ayuda["Comentario"]="Ingresa tus comentarios. De 5 a 500 caracteres. OBLIGATORIO";

preCarga("ok.gif", "loading.gif", "error.gif");
}

function preCarga()
{
imagenes=new Array();
for(i=0; i=minimo && cantCar<=maximo) return true;
else return false;
}
}

function validaCorreo(valor)
{
var reg=/(^[a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30}$)/;
if(reg.test(valor)) return true;
else return false;
}

function validaForm()
{
limpiaForm();
error=0;

var nombre=eliminaEspacios(form.inputNombre.value);
var empresa=eliminaEspacios(form.inputEmpresa.value);
var telefono=eliminaEspacios(form.inputTelefono.value);
var correo=eliminaEspacios(form.inputCorreo.value);
var comentarios=eliminaEspacios(form.inputComentario.value);

if(!validaLongitud(nombre, 0, 4, 50)) campoError(form.inputNombre);
if(!validaLongitud(empresa, 1, 4, 50)) campoError(form.inputEmpresa);
if(!validaLongitud(telefono, 1, 4, 50)) campoError(form.inputTelefono);
if(!validaCorreo(correo)) campoError(form.inputCorreo);
if(!validaLongitud(comentarios, 0, 5, 500)) campoError(form.inputComentario);

if(error==1)
{
var texto="Error: revise los campos en rojo.Ok";
muestraMensaje(texto);
}
else
{
var texto="Enviando. Por favor espere.Ocultar";
muestraMensaje(texto);

var ajax=nuevoAjax();
ajax.open("POST", urlDestino, true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("nombre="+nombre+"&empresa="+empresa+"&telefono="+telefono+"&correo="+correo+"&comentarios="+comentarios);

ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
var respuesta=ajax.responseText;
if(respuesta=="OK")
{
var texto="Gracias por su mensaje.Le responderemos a la brevedad.Ok";
}
else var texto="Error: intente más tarde.Ok";

muestraMensaje(texto);
}
}
}
}

// Mensajes de ayuda

if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
else navegador=1;

function colocaAyuda(event)
{
if(navegador==0)
{
var corX=window.event.clientX+document.documentElement.scrollLeft;
var corY=window.event.clientY+document.documentElement.scrollTop;
}
else
{
var corX=event.clientX+window.scrollX;
var corY=event.clientY+window.scrollY;
}
cAyuda.style.top=corY+20+"px";
cAyuda.style.left=corX+15+"px";
}

function ocultaAyuda()
{
cAyuda.style.display="none";
if(navegador==0)
{
document.detachEvent("onmousemove", colocaAyuda);
document.detachEvent("onmouseout", ocultaAyuda);
}
else
{
document.removeEventListener("mousemove", colocaAyuda, true);
document.removeEventListener("mouseout", ocultaAyuda, true);
}
}

function muestraAyuda(event, campo)
{
colocaAyuda(event);

if(navegador==0)
{
document.attachEvent("onmousemove", colocaAyuda);
document.attachEvent("onmouseout", ocultaAyuda);
}
else
{
document.addEventListener("mousemove", colocaAyuda, true);
document.addEventListener("mouseout", ocultaAyuda, true);
}

cNombre.innerHTML=campo;
cTex.innerHTML=ayuda[campo];
cAyuda.style.display="block";
}

Atte:
Diseño Web Peru
Diseño Web
desarrollo de software

Imagen de onlysystem.com

Saludos ahi les doy el cdigo fuente

1 Crear un archivo .php
-------------------------
<?php
function validaLongitud($valor, $permiteVacio, $minimo, $maximo)
{
$cantCar=strlen($valor);
if(empty($valor))
{
if($permiteVacio) return TRUE;
else return FALSE;
}
else
{
if($cantCar>=$minimo && $cantCar<=$maximo) return TRUE;
else return FALSE;
}
}

function validaCorreo($valor)
{
if(eregi("([a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30})", $valor)) return TRUE;
else return FALSE;
}

// MAIN

if($_POST)
{
foreach($_POST as $clave => $valor) $$clave=addslashes(trim(utf8_decode($valor)));
sleep(5);
if(!validaLongitud($nombre, 0, 4, 50)) $error=1;
if(!validaLongitud($empresa, 1, 4, 50)) $error=1;
if(!validaLongitud($telefono, 1, 4, 50)) $error=1;
if(!validaCorreo($correo)) $error=1;
if(!validaLongitud($comentarios, 0, 5, 500)) $error=1;

if($error==1) echo "Error";
else
{
$fecha=date("d/m/y - H:i");
$mensaje="
Tenés un nuevo mensaje desde el Sitio:

Fecha: $fecha
Nombre: $nombre
Empresa: $empresa
Telefono: $telefono
Correo electrónico: $correo
Comentarios: $comentarios";
mail("soporte@joelcristobal.com", "Comentario desde la Web", $mensaje, "From: Sitio Web ");
echo "OK";
}
}
?>

Atte:
--------------------------------------

Diseño Web Peru, Creacion de Software
Diseño Web
desarrollo de software

Imagen de Scrambler
Scrambler

Bueno quería comentarte una curiosidad sobre algo que comentastes tu.http://www.baluart.net/articulo/407/menu-de-pestanas-con-ajax.phpLo quise integrar con LightBox 2.0 y como ya sabes que al enviar java script mediante ajax no se ejecuta, entonces me empeñe en poder integrar las dos miniaplicaciones y el resultado para poder reporducir javascript en las pestañas de ajax era:function showResponse (originalRequest) {            var newData = originalRequest.responseText;            $('content').innerHTML = newData;            myLightbox.initialize ();        }Pense que te podria interesar, es gracioso poder interconnectar varias mini aplicaciones.Sobre el tema de los formulario inmediatos, he encontrado una referencia mediante este comentario, http://www.formassembly.com/blog/input-validation-explained/#comment-974 y el siguiente contestándole, utilizando la función OnBlur, que seria lo que necesito, el problema que el link que dan es supongo de versiones antiguas de wForm (sistema en el cual se ha basado el del tutorial).

Imagen de Balú
Balú

Ya me suponía que era con onblur... Gracias por la función (menudo trabajo).

Imagen de Luciano A. Ferrer
Imagen de c
Imagen de hjdfhj
hjdfhj

dghjdgh

Imagen de oskar
oskar

como puedo hacer para validar espacios en blanco por ejemplo xxx yyy  zzz

Imagen de Ivan
Ivan

Quisiera que me ayudaran. Hice una planilla para mandar informes mensuales, pero al principio salen los datos de la persona que envia dicho informe. Debo hacer que al insertar el numero de cedula, salgan los datos de la persona automaticamente.

Imagen de Cristian
Cristian

Pues el tema Validar formularios Web con Ajax esta chevere pero no hay una buena explicaci

Imagen de Ac

Gracias por la web ..pero creo que deberias intentar aplicarlos en este formulario tambien ..(de comentarios) ..solo un consejo ... no es una critica .. y para Cristian .. es simple lo que tienes que hacer es revisar ..la web y ver que scripts llama y que funciones de este scripts usa ..bajalos ..baja el html de la pagina original (donde ves el efecto) ..y wala ..hasta puedes crear tu propia manual ....Lo que felicito de esta web .. es su deseo de compartir .. quiza por el tiempo no hicieron ese manual ...Cuidense Gracias.

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más