Actualidad jQuery

Después de enseñaros como trabajar con los campos checkbox y los select, ahora vamos con los input radio que funcionan igual que los checkbox.

Vamos a comprobar con un botón el estado del radio, si está checked o no, y con otros botones vamos a activarlo y desactivarlo, para que veáis lo sencillo que es.

Primero vamos a comprobar el estado del radio:

$(document).ready(function(){

	$("#radio_comprobar").click(function() {
		if($("#radio").is(':checked')) {
			alert("Está activado");
		} else {
			alert("No está activado");
		}
	});

});

Una vez que presionemos el botón recibiremos en un alert la respuesta a si está activado o no el radio gracias a la función is(':checked')

Para terminar vamos a activar y desactivar el radio sin hacer click sobre él con estos 2 botones:

$(document).ready(function(){

	$("#radio_activar").click(function() {
		$("#radio").attr('checked', true);
	});

	$("#radio_desactivar").click(function() {
		$("#radio").attr('checked', false);
	});

});

El código HTML quedaría de esta forma:

<input name="radio" id="radio" type="radio" value="1" />
<input name="radio_comprobar" id="radio_comprobar" type="button" value="Comprobar" />
<input name="radio_activar" id="radio_activar" type="button" value="Activar" />
<input name="radio_desactivar" id="radio_desactivar" type="button" value="Desactivar" />

• Ejemplo

Otra de las facilidades que nos encontramos en jQuery es validar formularios, y trabajar con ellos dinámicamente.

Vamos a comprobar con un botón el estado del checkbox, si está checked o no, y con otros botones vamos a activarlo y desactivarlo, para que veáis lo sencillo que es.

Primero vamos a comprobar el estado del checkbox:

$(document).ready(function(){

	$("#checkbox_comprobar").click(function() {
		if($("#checkbox").is(':checked')) {
			alert("Está activado");
		} else {
			alert("No está activado");
		}
	});

});

Una vez que presionemos el botón recibiremos en un alert la respuesta a si está activado o no el checkbox gracias a la función is(':checked')

Para terminar vamos a activar y desactivar el checkbox sin hacer click sobre él con estos 2 botones:

$(document).ready(function(){

	$("#checkbox_activar").click(function() {
		$("#checkbox").attr('checked', true);
	});

	$("#checkbox_desactivar").click(function() {
		$("#checkbox").attr('checked', false);
	});

});

El código HTML quedaría de esta forma:

<input name="checkbox" id="checkbox" type="checkbox" value="1" />
<input name="checkbox_comprobar" id="checkbox_comprobar" type="button" value="Comprobar" />
<input name="checkbox_activar" id="checkbox_activar" type="button" value="Activar" />
<input name="checkbox_desactivar" id="checkbox_desactivar" type="button" value="Desactivar" />

• Ejemplo

Hoy vamos a validar todos los campos de un formulario con jQuery, para evitar que nos envíen los formularios de nuestro sitio web vacíos.

En primer lugar, vamos a comprobar que los campos nombre, apellidos, localidad, no se dejan en blanco y tienen una longitud mínima.

Después podemos continuar validando el teléfono, comprobando que todos los caracteres son numéricos.

También validaremos los campos de e-mail, para comprobar que se trata de una dirección e-mail correcta, con formato ejemplo@ejemplo.com

Para terminar validaremos los campos select, comprobando que se ha seleccionado una opción, y los input checkbox e input radio comprobando que han sido marcados.

Aquí el ejemplo del formulario:

<form name="formulario" id="formulario" class="formulario" action="" method="post">
<ul>
<li>Nombre <span>(*)</span></li>
<li>Apellidos <span>(*)</span></li>
<li><input name="nombre" id="nombre" type="text" /></li>
<li><input name="apellidos" id="apellidos" type="text" /></li>
<li>Teléfono <span>(*)</span></li>
<li>E-Mail <span>(*)</span></li>
<li><input name="telefono" id="telefono" type="text" /></li>
<li><input name="email" id="email" type="text" /></li>
<li>Localidad <span>(*)</span></li>
<li>Provincia <span>(*)</span></li>
<li><input name="localidad" id="localidad" type="text" /></li>
<li>
<select name="provincia" id="provincia" class="mail_provincia">
...............................
</select>
</li>
<li>¿Desea apuntarse al boletín de noticias? <span>(*)</span></li>
<li>&nbsp;</li>
<li>
<input name="boletin" id="boletin" type="radio" value="Si" /> Si
<input name="boletin" id="boletin" type="radio" value="No" /> No
</li>
<li>&nbsp;</li>
<li>¿Cada cuanto nos visitas? <span>(*)</span></li>
<li>&nbsp;</li>
<li><input name="visitas" id="visitas" type="checkbox" value="diariamente" /> Diariamente</li>
<li>&nbsp;</li>
<li><input name="visitas" id="visitas" type="checkbox" value="semanalmente" /> Semanalmente</li>
<li>&nbsp;</li>
<li><input name="visitas" id="visitas" type="checkbox" value="mensualmente" /> Mensualmente</li>
<li>&nbsp;</li>
<li class="botones"><input name="submit" id="submit" type="submit" value="Validar" /></li>
<li class="botones"><input name="reset" id="reset" type="reset" value="Restablecer" /></li>
</ul>
</form>

Y el código jQuery para validar los campos:

$(document).ready(function(){
	$("#formulario").submit(function () {
		if($("#nombre").val().length < 4) {
			alert("El nombre debe tener más de 3 caracteres");
			return false;
		}
		if($("#apellidos").val().length < 4) {
			alert("Los apellidos deben tener más de 3 caracteres");
			return false;
		}
		if($("#telefono").val().length < 4 || isNaN($("#telefono").val())) {
			alert("El teléfono debe tener más de 3 caracteres y solo números");
			return false;
		}
		if($("#email").val().length < 1) {
			alert("La dirección e-mail es obligatoria");
			return false;
		}
		if($("#email").val().indexOf('@', 0) == -1 || $("#email").val().indexOf('.', 0) == -1) {
			alert("La dirección parece incorrecta");
			return false;
		}
		if($("#localidad").val().length < 1) {
			alert("La localidad es obligatoria");
			return false;
		}
		if($("#provincia option:selected").val() == "") {
			alert("La provincia es obligatoria");
			return false;
		}
		if($("#localidad").val().length < 1) {
			alert("La localidad es obligatoria");
			return false;
		}
		if($("#boletin").is(':checked')) { } else {
			alert("Indique si desea apuntarse al boletín de noticias");
			return false;
		}
		if($("#visitas").is(':checked')) { } else {
			alert("Indique cada cuanto nos visitas");
			return false;
		}
		return false;
	});
});

Más adelante os explicaré uno a uno, como validar cada tipo de campo y algo más de información sobre ello.

Aquí os dejo el ejemplo, que es muy sencillo de entender.

• Ejemplo

Este ejemplo se puede realizar con HTML y CSS, pero para seguir explicando como funcionan los eventos mouseenter y mouseleave viene bien este ejemplo. En este ejemplo tan sencillo vamos a cambiar con css() el fondo del menú al pasar por encima.

Con HTML y CSS deberíamos hacerlo con las etiquetas <a> para poder hacer este efecto, con jQuery no es necesario especificar que se trata de un enlace <a> para hacer este efecto de cambio de color, al pasar por encima del texto/enlace.

Aquí os enseño el código jQuery que vamos a utilizar:

$(document).ready(function(){
	$(".menu li").mouseenter(function() {
		$(this).css("background","#006699");
	});
	$(".menu li").mouseleave(function() {
		$(this).css("background","#666666");
	});
});

Por defecto el color de fondo es background:#666666;, con el evento mouseenter le cambiamos el fondo a background:#006699; al pasar por encima. Y con mouseleave le volvemos a cambiar el fondo a background:#666666; al sacar el ratón fuera del texto/enlace. Aquí el menú HTML:

<ul class="menu">
<li>Enlace 1</li>
<li>Enlace 2</li>
<li>Enlace 3</li>
<li>Enlace 4</li>
<li class="fin">Enlace 5</li>
</ul>

Y el CSS:

.menu {
	float:left;
	width:100%;
	height:30px;
	line-height:30px;
	padding:0px;
	margin:0px;
	list-style-type:none;
	background:#666666;
	margin-bottom:10px;
}

.menu li {
	float:left;
	padding-left:33px;
	padding-right:33px;
	height:30px;
	line-height:30px;
	background:#666666;
	color:#FFFFFF;
	border-right:1px solid #FFFFFF;
}

.menu li.fin {
	border:0px;
}

• Ejemplo

Hoy os vamos a enseñar como utilizar las funciones mouseenter, mouseleave y animate de jQuery, con un ejemplo bastante sencillo pero muy práctico, para añadir textos a las imágenes.

Con el evento mouseenter y mouseleave podemos ejecutar una función asociada a dicha acción, al pasar por encima de un elemento, y al sacar el ratón del elemento.

Estos eventos son ideales para imágenes, para ejecutar alguna acción al pasar por encima de una imagen. Para realizar menús animados, al pasar por encima de un enlace, cambiar el color del fondo, el tamaño de la fuente, mover la posición del texto, etc.

<script type="text/javascript">
$(document).ready(function(){
	$(".ejemplo_img").mouseenter(function() {
		alert("Hemos metido el ratón dentro del elemento con clase ejemplo_img");
	});
	$(".ejemplo_img").mouseleave(function() {
		alert("Hemos sacado el ratón fuera del elemento con clase ejemplo_img");
	});
});
</script>
<div class="ejemplo_img"><img src="foto1.jpg" width="600" height="450" /></div>

Una vez que ya sabemos como utilizar estos eventos de posición del ratón, vamos a ejecutar una pequeña animación al pasar por encima de la imagen.

Con la función animate() de jQuery podemos animar un elemento cambiando su css, width, height, left, right, top, opacity, margin, fontsize, etc. En este ejemplo vamos a ocultar en css el título, y al pasar por encima de la imagen, con animate() vamos a cambiar su css y mostrarlo poco a poco con esta pequeña animación.

<script type="text/javascript">
$(document).ready(function(){
	$(".ejemplo_img").mouseenter(function() {
		$(".ejemplo_img_cont", this).stop().animate({ top:'390px' },{ queue:false, duration:300 });
	});
	$(".ejemplo_img").mouseleave(function() {
		$(".ejemplo_img_cont", this).stop().animate({ top:'450px' },{ queue:false, duration:300 });
	});
});
</script>

Por defecto le ponemos el top en 450px para ocultarlo debajo de la foto, y al pasar por encima (mouseenter) lo cambiamos a 390px para mostrarlo. Una vez que sacamos el ratón fuera (mouseleave) de la imagen,volvemos a poner el top en 450px para ocultarlo otra vez. Un ejemplo muy sencillo pero práctico para nuestros proyectos.

• Ejemplo