El uso de JQuery, Ajax y PHP es una poderosa combinación capaz de realizar los efectos web mas poderosos que se puedan ver. El día de hoy les traigo algo validación de formularios con PHP y AJAX a través de jQuery, de una forma mas amigable con el usuario.
Con este código, la página no es recargada al enviar el formulario y es PHP, no Javascript, el encargado de recibir los errores y transmitirlos al usuario a través de AJAX y jQuery. Es recomendado que leas el tutorial de jQuery y el tutorial de AJAX con jQuery.
Código del formulario: index.html
Código :
<html>
<head><title>Hola Mundo!</title></head>
<body>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
function verificar(){
$.ajax({type: "GET",url:"vef.php",data:"nick="+document.nickval.nick.value,success:function(msg){
$("#final").html(msg);
}})
}
</script>
<div id="final"></div>
<form name="nickval">
Nick:<br><input name="nick" value="Anonimo"><br>
<input type="button" value="Verificar" onClick="javascript:verificar()">
</form>
</body>
</html>
Código del PHP validador: vef.php
Código :
<?php
$nick=$_GET['nick'];
if($nick == "Anonimo"){
echo "Tu nick no puede ser anonimo!";
} else{
echo "Has pasado el filtro!!!";
}
?>Video mostrando el validador en desarrollo y en acción
El código completo y optimizado de HTML, AJAX y jQuery
Código :
<html>
<head>
<style type="text/css">
#final{display:none;}
</style>
<title>Hola Mundo!</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
function verificar(){
$("#final").fadeOut("slow");
$.ajax({type: "GET",url:"vef.php",data:"nick="+document.nickval.nick.value,success:function(msg){
$("#final").fadeIn("slow",function(){
$("#final").html(msg);
})
}})
}
</script>
<div id="final"></div>
<form name="nickval">
Nick:<br><input name="nick" value="Anonimo"><br>
<input type="button" value="Verificar" onClick="javascript:verificar()">
</form>
</body>
</html>
También recomiendo ver la documentación sobre la Api de jQuery en su sitio oficial.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Código :
<html> <head> <style type="text/css"> #final{display:none;} </style> <title>Hola Mundo!</title> </head> <body> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script> function verificar(){ $("#final").fadeOut("slow"); $.get("vef.php",{"nick":$('#nick').val(),"noCache":Math.random()},function(msg){ $("#final").fadeIn("slow",function(){ $("#final").html(msg); }) }) } </script> <div id="final"></div> <form name="nickval"> Nick:<br><input name="nick" id="nick" value="Anonimo"><br> <input type="button" value="Verificar" onClick="javascript:verificar()"> </form> </body> </html>Ojo a la inclusión de un ID para el INPUT de name=nick para poder cambiar document.nickval.nick.value por '#nick' y asi aprovechar las bondades de jQuery en lo que a reducción de código se refiere.
Por ultimo adicionamos el valor noCache para que siempre se verifique la la información enviada y no una que halla quedado cacheada por eso igualamos noCache a Math.random() y asi nos aseguramos que la cadena enviada por GET siempre sea diferente.
Una pregunta pq GET no sería mejor un POST, no es más seguro para el envió de datos a nivel formulario, cambia en algo el proceso o fue simplemente un elección del autor sin mayor relevancia en el resultado final, yo particularmente prefiero el uso de POST para lo cual deberíamos cambiar $.get por $.post y en el archivo vef.php habría que cambiar $nick=$_GET['nick'] por $nick=$_POST['nick'] o si gustan dejar la posibilidad abierta de recepcionar un GET o un POST indistintamente podriamos poner $nick=$_REQUEST['nick'] aunque algunos difieren de este ultimo tipo de practicas.
Por Raxiro el 29 de Noviembre de 2010
Y todos más felices con un JS no intrusivo
Por cierto, de acuerdo con NeoCesar con usar post y por cierto (2) buen tip Xer0s
<script type="text/javascript">
$.ajaxSetup({
cache: false
});
function verificar() {
var $final = $('#final').fadeOut('slow');
$.get('vef.php?nick='+encodeURIComponent($('#nick').val()), function(msg) {
$final.fadeIn('slow', function() {
$final.text(msg);
});
});
}
</script>
Por flaco el 01 de Diciembre de 2010
http://fdoyanes.blogspot.com/2010/07/jquery-plugin-validation.html
En cuanto al post y get , En este caso simplemente se uso una variable get para verificar un campo, ya cuando se envía todo el formulario lo mas aconsejable es usar POST, pero como dices; no tiene relevancia
Por Becquerel el 19 de Diciembre de 2010
$.ajax({type: "GET",url:"vef.php",data:"nick="+document.nickval.nick.value
Acá solo pasas 1 que es "nick". Se pueden pasar más de una?
Si, tienes que hacerlo de la siguiente forma:
data:"nick="+docu....value+"&pass="+docu....value
usando & con la respectiva nueva variable.
Por dani86 el 31 de Mayo de 2012
Gracias y un saludo!
Por FabVale el 31 de Mayo de 2012
Código :
Y poner:
Código :
Y dentro de la funcion verificar en javascript, devolver true si paso la validacion y devolver false si no la paso. El false hara que se evite el envio del formulario.
Por dild19 el 14 de Agosto de 2012
Tengo una duda: lo que sucede es que tengo un formulario con 6 campos de texto y un select para elegir una ciudad, y quiero que cuando se haga la validación de cada uno de esos campos al hacer clic en el botón de enviar se despliegue un mensaje de error al lado derecho del campo que tenga determinado error, ya sea porque lo ha dejado vacío o porque ha introducido un caracter inválido en ellos. Ya le inserté un div a cada campo pero veo que en el tutorial utilizas solo un div:
$("#final").fadeIn("slow",function(){
$("#final").html(msg);
Cómo puedo lograr que se muestren los mensajes de error en los div's de los campos que presenten error??
Gracias y estaré atento a tu respuesta!!!!
Por Melisa Keys el 26 de Octubre de 2012