Ajax y jQuery 6/6 – Procesando formularios con validaciones
Siguiendo con el ejemplo visto en el artículo anterior sobre la serie de Ajax y jQuery, usemos el mismo ejemplo en el cual habíamos creado un script super sencillo y genérico para hacer que nuestro menú utilice llamadas asíncronas al servidor y agreguemos la funcionalidad de envío a nuestro formulario de contacto. Los archivos del ejemplo anterior los puedes descargar de aquí.
El objetivo de este artículo será agregar validaciones a nuestros formularios enviados por Ajax, ya que el envío en sí se encuentra explicado en el artículo sobre Hijax.
Recordemos el ejemplo anterior
El código del ejemplo anterior para la página de contacto es el siguiente.
<?php sleep(1) ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="loading"><img alt="Cargando" src="loading.gif" /></div>
<div id="mainmenu">
<ul id="menu">
<li><a href="inicio.php" class="ajax">Inicio</a></li>
<li><a href="acercade.php" class="ajax">Acerca de</a></li>
<li><a href="contacto.php" class="ajax">Contactos</a></li>
</ul>
</div>
<div id="content">
<h1>Contacto</h1>
<form action="procesar_contacto.php">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" /><br />
<label for="asunto">Asunto:</label>
<input type="text" name="asunto" id="asunto" /><br />
<label for="comentario">Comentario:</label>
<textarea cols="30" rows="5" name="comentario" id="comentario"></textarea><br />
<input type="submit" value="Enviar" />
</form>
</div>
</body>
</html>
