Actualidad jQuery

Hoy vamos a enseñaros estas funciones de jQuery con las que podemos añadir y quitar estilos en nuestros sitios web de forma muy sencilla.

Las podemos utilizar en formularios, en menús, en imágenes, etc.

Vamos a enseñaros un ejemplo con un formulario, para darle un toque algo más vistoso y validando los campos.

Primero vamos a crear los 3 estilos distintos para el formulario, que vamos a ir añadiendo y quitando con distintos eventos.

.input_text {
	background:#FFF;
	width:150px;
	height:22px;
	line-height:22px;
	padding:4px;
	border:1px solid #999;
}

.input_text_encima {
	width:148px;
	height:20px;
	line-height:20px;
	border:2px solid #00CC00;
	color:#009900;
}

.input_text_dentro {
	width:148px;
	height:20px;
	line-height:20px;
	border:2px solid #00CC00;
	color:#000000;
	background:#e3e3e3;
}

.input_text_error {
	width:148px;
	height:20px;
	line-height:20px;
	border:2px solid #FF0000;
	color:#FF0000;
}

Ahora vamos a cambiar el estilo del formulario al pasar por encima del campo y al salir fuera con addClass y removeClass:

$(".input_text").mouseenter(function() {
	$(this).addClass("input_text_encima");
});
$(".input_text").mouseleave(function() {
	$(this).removeClass("input_text_encima");
});

Al pasar el ratón por encima del campo le añadiremos la clase input_text_encima al campo con addClass y al sacar el ratón fuera del campo, le quitaremos la clase input_text_encima con removeClass.

Ahora vamos a cambiar el estilo del formulario al entrar en el campo o presionar el campo para editarlo, le añadiremos la clase input_text_dentro y se la quitaremos al salir del campo o presionar fuera.

$(".input_text").focus(function() {
	$(this).addClass("input_text_dentro");
});
$(".input_text").blur(function() {
	$(this).removeClass("input_text_dentro");
});

Ahora vamos a validar los 2 campos del formulario. En vez de mostrar el mensaje de error en un alert, vamos a cambiar el estilo del campo para indicar que el campo no ha sido rellenado correctamente.

$("#formulario").submit(function () {
	if($("#nombre").val().length < 5) {
		$("#nombre").addClass("input_text_error");
		return false;
	}
	if($("#telefono").val().length < 9) {
		$("#telefono").addClass("input_text_error");
		return false;
	}
	return false;
});

• Ejemplo