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
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!!!
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?
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.
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
:)
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...
Cheka aka hay un ejemplo para comprobar usuarios.. utilizando Ajax, en este ejemplo esta para comprobar con un boton, pero puedes reemplazarlo, por otro metodo para que valla validando mientras vas escribiendo...:
http://sam-jp.blogspot.com/2009/09/comprobar-usuario-con-ajax.html
tb puedes descargarte el codigo.....
Saludos
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
Para Oskar, lo puedes asi:
function verif(t) {
tecla=(document.all) ? t.keyCode : t.which;
if(tecla==32) return false;
}
Saludos
Traza, Diseño Web
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
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
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).
Ya me suponía que era con onblur... Gracias por la función (menudo trabajo).
YAV http://yav.sourceforge.net/ es una pequeña librería que hace algo similar, lo he usado y creo que es bastante potente...
ccc
dghjdgh
como puedo hacer para validar espacios en blanco por ejemplo xxx yyy zzz
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.
Pues el tema Validar formularios Web con Ajax esta chevere pero no hay una buena explicaci
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.