Comunidad de diseño web y desarrollo en internet online

Validar formularios HTML con PHP, AJAX y JQuery

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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate