jQuery Validate: la rápida validación de formularios. Blog de Martin Iglesias

jQuery Validate: la rápida validación de formularios.

Escrito por Martín Iglesias y leído 34,425 veces. Ver comentarios

04DICIEMBRE/2008

Cansado de usar siempre el mismo javascript para validar formularios o de procesar el formulario y validar en PHP los campos (cosa menos recomendada y que debo cambiar en esta web), me decidí por probar el plugin Validate de jQuery.

Con pocas líneas de código y otras pocas de CSS, tus formularios estarán validados rápidamente.

Te lo aconsejo ;)

Proceso:
1) Incluir dentro del head los script de jQuery y el de validación y el estilo (ver código 1)
2) Crear tu formulario... (ver código 2)
3) Llamar la validación justo debado del (ver código 3)
4) Listo el pollo...

Por supuesto que todo puede mejorarse, la presentación del error, etc... este es un ejemplo básico, que, por cierto, te puedes descargar desde el enlace que aparece más abajo.

Si quieres ver todos los métodos que acepta el plugin Validate de jQuery, visita http://docs.jquery.com/Plugins/Validation#Example

ACTUALIZACION: He publicado un nuevo post sobre jQuery Validate con envío de formularios mediante phpmailer y gmail.

Código 1 - HTML

<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<style>
form {width:700px;height:520px;display:inline;float:left;margin:20px 0 0 0}
label { color: #000; font-size: 1em; line-height: 140%; margin: 10px 0 .2em 90px; display: block; }
input.textField { width: 350px; color: #000; font-size: 1.1em; padding: 4px; background: #fff; border: 1px solid #999; margin: 0 0 20px 0; display: inline;margin: 0 0 .2em 90px;  }
textarea.textArea { width: 500px; height: 150px; color: #000; font-family: Tahoma,tahoma,sans-serif,Arial,Tahoma,Verdana;font-size: 1em; padding: 4px; background: #fff; border: 1px solid #999; margin: 0 0 .2em 90px; overflow: auto; }
.error-message, label.error { color: #a10052; margin: 0 0 .5em 90px;  display: block; font-size: 1em !important;font-weight:bold; }
</style>
</head>

Código 2 - HTML

<form id="frmContact" method="post">
<fieldset style="display:none;"><input type="hidden" name="_method" value="POST" /></fieldset>
<label for="ContactName">NOMBRE</label><input name="data[Contact][name]" type="text" class="textField" maxlength="255" value="" id="ContactName" />
<label for="ContactRecipient">CORREO ELECTRÓNICO</label><input name="data[Contact][recipient]" type="text" class="textField " value="" id="ContactRecipient" />
<label for="ContactPhone">TELÉFONO</label><input name="data[Contact][phone]" type="text" class="textField" maxlength="255" value="" id="ContactPhone" />
<label for="ContactMessage">MENSAJE / CONSULTA</label><textarea name="data[Contact][message]" cols="5" rows="3" class="textArea" id="ContactMessage" ></textarea>
<input type="image" src="enviar.png" alt="Enviar" style="margin: 10px 0 .2em 86px;" />
</form>

Código 3 - JAVASCRIPT

$(document).ready(function(){
	$("#frmContact").validate({
	event: "blur",
	rules: {
		'data[Contact][name]': "required",
		'data[Contact][recipient]': { required: true, email: true },
		'data[Contact][message]': "required"
	},
	messages: {
		'data[Contact][name]': "Por favor ingrese su nombre",
		'data[Contact][recipient]': "Ingrese una dirección de e-mail válida",
		'data[Contact][message]': "Por favor, ingrese su mensaje o consulta"
	},
	
debug: true,
errorElement: "label",
errorContainer: $("#errores"),
submitHandler: function(form){
$.ajax({
type: "POST",
url: "contacto.asp",
data: "nombre="+$('#ContactName').val()+"&email="+$('#ContactRecipient').val()+"&telefono="+$('#ContactPhone').val()+"&comentario="+$('#ContactMessage').val(),
success: function(msg){
if(msg==1){
$("#mensaje").html("El mensaje se ha enviado correctamente");
}
}
});
}
});
});

Acerca del Autor:

Diseñador web freelance en Coruña Galicia | Martin Iglesias

Martín Iglesias, diseñador web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 15 años de experiencia en el desarrollo de páginas web profesionales.

Si te ha gustado este artículo, por favor, ayúdame a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

jQuery Validate: la rápida validación de formularios.

Acerca del Autor:

Artículos relacionados: