jQuery Validate: la rápida validación de formularios.
Escrito por Martín Iglesias y leído 34,425 veces. Ver comentarios
04DICIEMBRE/2008
- Categorías:
- Formularios
- Validacion
- Jquery
- Javascript
- Html
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.
<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><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>
$(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!
Artículos relacionados:
- 20 plugins para jQuery que no pueden faltar en tus webs
- Excelente listado de 240 plugins para jquery
- Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
- Calendario en PHP con eventos, jQuery y vTip
- Formularios web con jQuery Validate y envío por phpmailer y gmail
- 18 plugins jquery que no pueden faltar en tu web parte 2
- Uso de jScrollPane para jQuery. Elegante scroll en tus div
Este artículo ha salido en un total de 1,102 búsquedas desde Google en sus 1,630 días de vida y ha sido visto 34,425 veces.
