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

Escrito por: Martín el 04-12-2008 13:26:25 y leído 18876 veces

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 XHTML

<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 XHTML

<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 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");
}
}
});
}
});
});

[Descargar Adjunto]

Categorías: Formularios • Validacion • Jquery • Javascript • Html •