Validar formulario con jquery y recibir con PHP

Si nos gusta utilizar jQuery en el desarrollo de aplicaciones podemos hechar un vistazo al siguiente script que utiliza el jQuery para validar los datos introducidos en los campos al pulsar el botón enviar sin recargar por completo la página.

Después se utiliza PHP para recibir los datos para guardarse en una base de datos o para hacer lo que sea necesario.

Para implementarlo puedes ver el código fuente del ejemplo para ver como es el código jQuery. El formulario a utilizar sería el siguiente:

<form action="index.php" method="post" name="myform" id="myform" onSubmit="return checkForm(this);">
   <table>
      <tr>
         <td><label for="usuario">Usuario</label></td>
	 <td><input name="nombre" id="nombre" type="text" value="" onblur="checkField(this);" /></td>
      </tr>
      <tr>
         <td><label for="pass">Contrase&ntilde;a</label></td>
         <td><input name="password" id="password" type="password" value="" onblur="checkField(this);" /></td>
      </tr>
   </table>
   <br />
   <input name="subbtn" id="subbtn" type="submit" value="Enviar" />
</form>

Si nos fijamos en el código anterior, vemos que el formulario al enviarse llama a la función checkForm(this) en la cual se validan los campos del formulario mediante jQuery.

También vemos que solo vamos a jugar con dos datos (usuario y contraseña) y en cada input estamos ejecutando onblur=»checkField(this);». Con ello lo que hacemos es que al abandonar el input se validan mediante jQuery los datos introducidos.

Si los datos introducidos ya son los esperados se procedería a tratar los datos mediante PHP. Lo podríamos hacer de la siguiente forma:

<?php
if (isset($_POST['subbtn'])) {
   echo '<p>Los datos enviados son correctos!</p>';
   echo 'Usuario: '.$_POST['nombre'].'<br>';
   echo 'Password: '.$_POST['password'].'<br><br>';
}
?>

En este caso, simplemente estamos mostrando los datos recibidos tras pulsar el botón de enviar pero dentro de este código podría haber otra programación como por ejemplo guardar los datos en la base de datos o en un archivo, comprobar si existen esos datos en la base de datos y todo lo que puedas imaginar.

Ver ejemplo en funcionamiento