Formulario Web con jQuery Validate
Actualmente validar formularios desde el lado cliente está siendo una costumbre muy habitual en la mayoría de Webs.
En el siguiente artículo vamos a ilustrar como podemos validar campos utlizando el script jQuery Validate.
Lo primero que tendremos que hacer es incluir en nuestro <head> los scripts necesarios:
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script src="jquery.form.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script>
Seguidamente, también en el <head> deberemos tener la validación de los campos.
<script type="text/javascript">
$(document).ready(function(){
$("#mensaje").hide();
$("#frmContact").validate({
event: "blur",rules: {'nombre': "required",'email': "required email",'consulta': "required"},
messages: {'nombre': "Por favor indica tu nombre",'email': "Por favor, indica una dirección de e-mail válida",'consulta': "Por favor, dime algo!"},
debug: true,errorElement: "label",
submitHandler: function(form){
$("#mensaje").show();
$("#mensaje").html("<img src='ajax-loader.gif' style='vertical-align:middle;margin:0 10px 0 0' /><strong>Enviando mensaje...</strong>");
$.ajax({
type: "POST",
url:"envio.php",
contentType: "application/x-www-form-urlencoded",
processData: true,
data: "nombre="+escape($('#ContactName').val())+"&email="+escape($('#ContactRecipient').val())+"&mensaje="+escape($('#ContactMessage').val()),
success: function(msg){
$("#mensaje").html("<strong>Mensaje enviado correctamente. En breve recibirás mi respuesta. Gracias!</strong>");
document.getElementById("ContactName").value="";
document.getElementById("ContactRecipient").value="";
document.getElementById("ContactMessage").value="";
setTimeout(function() {$('#mensaje').fadeOut('fast');}, 3000);
}
});
}
});
});
</script>
Como vemos, definimos los elementos del formulario que serán requeridos, utilizamos ajax para obtener los datos mediante POST realizando la acción en el servidor que haya en el archivo «envio.php».
Opciones de Validación.
jQuery Validate nos da muchas opciones de validación, aquí abajo pego una lista de métodos que permite, ya sean campos de correo electrónico, texto, números, fechas, tarjetas de crédito, etc… En mi ejemplo, solo usaremos el email y otros de texto normales.
Métodos.
required( )
Convierte el elemento en requerido.
minlength( length )
Requiere un mínimo de caracteres para validar.
maxlength( length )
Requiere un máximo de caracteres para validar.
min( value )
Establece un número por el cual el valor ingresado debe ser mayor para validar.
max( value )
Establece un número por el cual el valor ingresado debe ser menor para validar.
email( )
Requerirá un email válido.
url( )
Requerirá una url válida.
date( )
Requerirá una fecha válida.
number( )
Requerirá un número decimal.
digits( )
Requerirá solo números.
creditcard( )
Requerirá un número de tarjeta de crédito válido.
accept( extension )
Hará que el elemento sólo soporte los tipos válidos de extensión.
equalTo( other )
Requerirá que un campo sea igual a otro (ideal para contraseñas)
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
Como validaras el campo teléfono? Que solo contenga dígitos. Gracias por tu ayuda.
Hola,
Revisa en la página oficial a ver si existe esta posibilidad de validación:
https://jqueryvalidation.org/validate/
Saludos
Hola Jose, podrias pasarme el codigo ? Estaba tratando de armar algo parecido hace poco y me trabe.
Saludos!
Hola, el código te lo puedes copiar e implementar viendo el código fuente del ejemplo. Espero que te sirva. No podemos acceder ahora mismo a los archivos via ftp.
hola buenas noches, primero que nada dejame felicitarte por tu sitio web, para mi es de gran ayuda, queria preguntar por algun metodo para saber cuantas personas han entrado a visitar mi pagina , pero que aparesca en la pagina algo como ….. visitante numero 500 o numero….. , realmente lo encontre aqui pero solo es a nivel base de datos, y yo lo quisiera implementar en mi sitio web.
de antemano muchas gracias, y tu sitio esta muy cool 😉
Bueno, es muy sencillo implementar un contador de visitas. Antes de nada debo decir que si utilizas Worpdress ya tienes muchos plugins que te podrían ayudar y si se trata de un proyecto programado desde 0 sin utilizar ningún gestor de contenido tan solo tienes que tener una tabla donde vayas registrando las visitas. Esta tabla podría tener los siguientes campos: id_visita, ip, fecha de visita. El registro lo puedes ejecutar tanto en la cabecera como en el footer, donde más te guste. Después en el backoffice tendrás que hacer las consultas necesarias para poder ver las visitas diarias.
I really enjoy reading through on this site, it contains fantastic content . «He who sees the truth, let him proclaim it, without asking who is for it or who is against it.» by Henry George.