Validación de formularios con jQuery


Hace poco estaba trabajando en un proyecto, el cual tiene un formulario de contacto.

Leyendo en blogs, ví que lo ideal es hacer una validación de lado del cliente antes de enviar el formulario al servidor y que éste a su vez realice una validación.

El formulario solo lo estaba validando de lado del servidor y decidí implementar código JavaScript para validar mi formulario. Encontré muchos scripts que ayudan a realizar esa tarea y decidí utilizar el script de bassistance.de.

Mi código para el formulario es el siguiente:


<form id="contacto" action="..." method="post" name="contacto" accept-charset="utf-8">
<label for="nombre">Nombre: </label><input type="text" name="nombre" value="" />
<label for="apellido">Apellido: </label><input type="text" name="apellido" value="" />
<label for="tel">Teléfono: </label><input type="text" name="tel" value="" />
<label for="movil">Movil: </label><input type="text" name="movil" value="" />
<label for="email">Email: </label><input class="required" type="text" name="email" value="" />
<span class="confirmation">
<label for="email_conf">Email-conf: </label><input type="text" name="email_conf" value="" />
</span>
<label for="mensaje">Mensaje: </label><textarea name="mensaje" rows="10" cols="30"></textarea>
<input type="submit" name="submit" value="Enviar" />
</form>

Para poder utilizar el plugin, primero hay que cargar la librería jQuery y el plugin. Ambos se pueden cargar ya sea guardandolos en el servidor o haciendo referencia a un sitio donde se encuentren hospedados los scripts. En mi caso, yo hice referencia a dominios donde se encontraban hospedados los scripts:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></scrip

A continuación, procedo a configurar las reglas de la validación. Estas reglas se definen en formato JSON de la siguiente manera:

		$(document).ready(function(){
			$("#contacto").validate({
				rules: {
					nombre : {
						required : true},

					apellido : {
						required : true},

					email : {
						required: true,
						email: true},

					email_conf : {
						equalTo : ""},

					mensaje : {
						required: true}
				},
				messages:{
					nombre  : {
						required : "Ingresa tu nombre"},

					apellido : {
						required : "Ingresa tu apellido"},

					email : {
						required : "Ingresa un email",
						email : "Ingresa un email valido"
					},

					email_conf : {
						equalTo : "FOOL"},

					mensaje : {
						required : "Escribe tu mensaje"}
				}

			});
		});

En el elemento rules, lo que hago es definir las reglas para cada uno de los campos que quiero validar, en este caso, la mayoría de los campos son requeridos, por lo tanto utilizo el índice required, el cual llama a la funcion required de jQuery y asigno su valor a true. El campo email necesita ser un email valido, por lo tanto utilizo el índice email, el cual llama a la función email y asigno su valor a true.

El campo email_conf me sirve como un filtro antispam, por lo tanto, aqui utilizo la funcion equalTo. A éste índice le asigno un valor vacío, ya que si algún usuario malicio lo modifica, entonces el contenido del formulario no se podrá enviar.

jQuery por default tiene mensajes que se muestran si las reglas no se cumple. A su vez, jQuery permite personalizar esos mensajes, para eso, utilizo el elemento messages. Dentro de messages vuelvo a definir los campos de mi formulario, y dentro de cada uno, escribo cuál va a ser el mensaje que quiero que vea el usuario en caso de que la validación de dicho campo sea incorrecta.

Aquí no es necesario que se defina la función .submit() de jQuery, ya que automáticamente al validarse el formulario se genera un resultado booleano. En caso de ser verdadero, se envía el formulario al servidor para ser procesado, de lo contrario, se muestran los mensajes de error por default o los definidos por el usuario.

Y bueno, con eso termino este breve tutorial. Espero que sea de ayuda para muchos que como yo, apenas comienzan a trabajar con JavaScript y jQuery.

Anuncios
Esta entrada fue publicada el 8 junio, 2012 a las 4:07. Se guardó como Tech y etiquetado como , , , , . Añadir a marcadores el enlace permanente. Sigue todos los comentarios aquí gracias a la fuente RSS para esta entrada.

4 pensamientos en “Validación de formularios con jQuery

  1. Allison Lopez en dijo:

    ¿Y como hago para insertar los datos en una base de datos MySQL?

    • Hola,
      Antes que nada gracias por tomarte la molestia de leer mi publicación.
      Mira una vez que validas el formulario pues ya se envían los datos al servidor; en este caso utilicé el método POST, por lo que del lado del servidor, recibo los datos asi:
      El campo de nombre tiene su propiedad name igual a nombre. Para poder manejar los datos de ese campo lo hago asi:
      $_POST[“nombre”].

      Ahora si quieres, tú podrías asignar ese dato a una variable, de la siguiente manera:
      $nombre = $_POST[“nombre”];.

      Finalmente tendrias que ejecutar tu query de la siguiente manera:
      $mysql = new mysqli(‘host’, ‘usuario’, ‘password’, ‘base_de_datos’);
      $mysql->query(“INSERT INTO tabla(campo) VALUES (‘$nombre’)”);

  2. adrian en dijo:

    donde ingreso el mail de destino..?
    para que llegue a mi correo..

    saludos.

    • Mira yo utilicé un framework para enviar los mails
      Pero si checas la documentación de PHP, se te muestra algo parecido a esto:

      $to = 'nobody@example.com';
      $subject = 'the subject';
      $message = 'hello';
      $headers = 'From: webmaster@example.com' . "\r\n" .
      'Reply-To: webmaster@example.com' . "\r\n" .
      'X-Mailer: PHP/' . phpversion();

      mail($to, $subject, $message, $headers);

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: