Actualidad jQuery

Ayer os explicabamos como trabajar con los campos checkbox, validar su estado y cambiar su estado mediante jQuery. Hoy vamos a hacer lo mismo pero con un campo select.

Hemos creado 4 botones, 1 botón para comprobar el estado del select, y los otros 3 botones para cambiar la opción seleccionada.

Primero vamos a obtener la opción seleccionada del select, el id y el texto, presionando sobre el botón.

$(document).ready(function(){

	$("#select_comprobar").click(function() {
		alert("Id: "+$("#sexo option:selected").val()+" | Texto: "+$("#sexo option:selected").text());
	});

});

Una vez que presionemos el botón recibiremos en un alert el id y el texto de la opción seleccionada, gracias al atributo option:selected ($("#sexo option:selected").val() / $("#sexo option:selected").text())

Para terminar vamos a cambiar la opción seleccionada del select con estos 3 botones:

$(document).ready(function(){

	$("#select_cambiar_defecto").click(function() {
		$("#sexo option[value=0]").attr("selected",true);
	});

	$("#select_cambiar_hombre").click(function() {
		$("#sexo option[value=1]").attr("selected",true);
	});

	$("#select_cambiar_mujer").click(function() {
		$("#sexo option[value=2]").attr("selected",true);
	});

});

El código HTML quedaría así:

<select name="sexo" id="sexo">
<option value="0">- Seleccionar -</option>
<option value="1">Hombre</option>
<option value="2">Mujer</option>
</select>

<input name="select_comprobar" id="select_comprobar" type="button" value="Comprobar" />
<input name="select_cambiar_defecto" id="select_cambiar_defecto" type="button" value="Seleccionar defecto" />
<input name="select_cambiar_hombre" id="select_cambiar_hombre" type="button" value="Seleccionar hombre" />
<input name="select_cambiar_mujer" id="select_cambiar_mujer" type="button" value="Seleccionar mujer" />

• 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

Hoy os vamos a enseñar una librería en jQuery para darle un aspecto distinto y elegante a nuestros formularios.

Para empezar vamos a bajarnos la librería de su página web oficial (dfc-e.com) y añadiremos la librería a nuestro sitio web como en el ejemplo:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jqtransformplugin/jquery.jqtransform.js"></script>
<link href="../jqtransformplugin/jqtransform.css" rel="stylesheet" type="text/css" />

Añadimos como siempre la librería jQuery, añadimos la librería jqTransform y la hoja de estilos de esta.

Se activa para todas las etiquetas de formulario, input, radio, checkbox, textarea que tengamos entre las etiqueta <form> </form>

Podemos activarlo para todos los formularios que nos encontremos dentro de la página o para un formulario específico como en el siguiente ejemplo, se lo activamos al formulario con id form2:

<script type="text/javascript">
$(document).ready(function(){
	$("#form_2").jqTransform();
});
</script>

<form action="" name="form_2" id="form_2" method="post"></form>

De esta forma, una vez haya cargado la página, se activaría jqTransform para nuestro formulario. Si quisiéramos aplicar el estilo de la librería en algún contenido dinámico cargado vía Ajax, etc. O bien aplicar el estilo más adelante, de forma interactiva, lo podríamos hacer así:

<script type="text/javascript">
$(document).ready(function(){
	$('#formulario_3_act').click(function() {
		$("#form_3").jqTransform();
	});
});
</script>

En este ejemplo utilizamos la función click() de jQuery para aplicar la librería jqTransform, una vez que hayamos hecho click sobre el botón formulario_3_act que podéis ver en el ejemplo final:

• Ejemplo
• jqTransform 1.1