Comunidad de diseño web y desarrollo en internet online

Validar formularios que usan ajax

Citar            
MensajeEscrito el 19 Nov 2007 07:34 pm
Tengo un formulario que esta hecho con ajax y al pasar los datos por el post tambien usa el evento onsubmit de javascript para pasar los datos que se estan enviando del formulario por lo que no se como hacer para que ademas de pasar esos datos, antes de que haga eso valide si estan correctos los campos...

El formulario es el siguiente:

Código :

<form action="" method="post" name="f1" onsubmit="FAjax('principal.php','contenido2','nombre='+document.getElementById('nombre').value+'&apellido='+document.getElementById('apellido').value+'&telefono='+document.getElementById('telefono').value+'&enviado='+document.getElementById('enviado').value,'post'); return false">
Nombre de Usuario <input type=text name=nombre id=nombre value=><br>
Apellido de Usuario <input type=text name=apellido id=apellido value=><br>
Telefono de Usuario <input type=text name=telefono id=telefono value=><br>
Prueba select <select name=Select>
      <option value=1 >erick</option>
      <option value=2 >Pepe</option>
      <option value=3 >Takashi</option>
</select><br>
Prueba2 <select name=Select2>
      <option value=1 >hernandez</option>
      <option value=2 >Trueno</option>
      <option value=3 >Onimaru</option>
</select><br>
<input type=submit name=enviar id=enviar value=Enviar><br>

la validacion del formulario estaria en otra funcion, pero no se como llamarla en ese formulario

Por Takashi

Claber

105 de clabLevel



Genero:Masculino  

Caracas - Venezuela

firefox
Citar            
MensajeEscrito el 27 Nov 2007 07:22 am
Hola. Deberías validar en el lado del servidor, cuando tus datos lleguen por $_POST en caso de ser PHP, validas cada uno de los campos y a continuación envías un OK o una serie de Errores, y en función de eso, puedes escribir ese mensaje para el usuario:
"Su formulario se ha enviado correctamente" ó "Hay errores aquí y aquí...". Ya doy por supuesto, que FAjax() contiene un responseText, donde obtendrás una respuesta cuando ajax se haya ejecutado correctamente (200).

Saludos.

Por frenadoll

922 de clabLevel

6 tutoriales

Genero:Masculino  

Barcelona

safari
Citar            
MensajeEscrito el 27 Nov 2007 08:06 pm
mucho mas simple es agregar dentro de la funcion Ajax la validacion de campos, tambien te recomiendo que no establezcas la funcion con tantas varibles que se hace engorrozo ... los valores de los campos los puedes tomar despues por medio de java dentro de la misma fuyncion ajax aqui te dejo codigo que utilizo para hacer lo que tu necesitas y me funciona perfecto:


<script language="JavaScript" type="text/javascript">
//////Objeto ajax
function nuevoAjax(){
var xmlhttp = false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}


if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
////////////






function AddNewUser(){/////////funcion que valida los campos y ademas envia por POST los valores

form = document.add_new_user ///nombre del formularoi

form.nombre.className = "text_area"; //campo textbox
form.mail.className = "text_area"; //campo textbox
form.pass1.className = "text_area"; //campo textbox

if (form.nombre.value == '' || form.nombre.value.length <= 4){
div_msg.innerHTML = 'Ingrese un nombre v&aacute;lido.';
form.nombre.className = "inputbox";
form.nombre.focus();
return (false);
}

if (form.mail.value == '' || form.mail.value.length <= 4 || !form.mail.value.match("@") || !form.mail.value.match(".")){
div_msg.innerHTML = 'Ingrese un E-mail v&aacute;lido.';
form.mail.className = "inputbox";
form.mail.focus();
return (false);
}

if (form.pass1.value == '' || form.pass1.value.length < 6){
div_msg.innerHTML = 'Su contrase&ntilde;a debe ser de 6 caracteres o m&aacute;s.';
form.pass1.className = "inputbox";
form.pass2.className = "inputbox";
form.pass1.focus();
return (false);
}



c1 = document.getElementById('loading1'); ///este es un div donde cargo una imagen gif de "cargando"
c3 = document.getElementById('contenedor'); ////este es la capa div donde se mostrara el resultado del php que procesa los datos que enviamos por POST
ajax = nuevoAjax();
c1.innerHTML = '<img src="images/loading.gif"/>'; ///unicacion del gif loader
ajax.open("POST", "add_new_user.php?nocache="+new Date().getTime(),true); //este archivo recoge los datos del formulario y los procesa (le pongo una variable nocache igual a un numero al azar para evitar almacenamiento en cache del navegador)
ajax.onreadystatechange = function() {
if (ajax.readyState ==4) {
c3.innerHTML = ajax.responseText; // luego que se envian los datos por POST se completa el div con los resultados que arroje el archivo add_new_user.php

}

}

datos = "nombre="+form.nombre.value+"&mail="+form.mail.value+"&pass="+form.pass1.value; ///se estableces las variables para enviarlas al PHP
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.setRequestHeader("Accept-Charset", "iso-8859-1");
ajax.send(datos);
}

</script>



Luego el formulario te quedaria simplemente le pones : onsubmit="AddNewUser(); return false;"

este codigo lo utilice para un cliente y lo puedes ver en esta direccion http://www.araza.cl/index.php?tab=subasta

Por y2k_2000

5 de clabLevel



 

firefox
Citar            
MensajeEscrito el 28 Nov 2007 04:59 pm
Si validas con javascript asegurate de validar también por el lado de servidor no sea que algún jacker te meta algo raro xDDDD

Por frenadoll

922 de clabLevel

6 tutoriales

Genero:Masculino  

Barcelona

firefox
Citar            
MensajeEscrito el 16 Ene 2012 07:25 pm
hola compañeros soy totalmente nuevo en ajax y estoy haciendo auna aplicacion estoy validando usuario y contraseña y valdar los campos de texto si estan en blanco hacer un return false y jala bien si el usuario existe en la base de datos pasar a otro formulario de captura quesiera saber como puedo hacer eso porque el que me arroja el error si no estoy registrado es un div y para otro formulario es otro div quisiera saber como puedo hacer es en ajax que me pase a otro div saludos espero me puedan ayudar saludos

Por escualo22

0 de clabLevel



 

msie8

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.