Tag Archives: formularios

Añadiendo y quitando estilos, con addClass y removeClass en jQuery

31 oct

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;
});

Validar dirección e-mail en formularios con jQuery

30 oct

Una vez que ya sabemos validar campos input con longitud mínima, campos select, campos checkbox, campos radio, campos de teléfono y campos de e-mail, vamos a validar un campo de dirección e-mail y ya podremos validar casi al 100% un formulario completo.

Primero vamos a validar la longitud escrita, para comprobar que no esté vacío:

$("#formulario").submit(function () {
	if($("#email").val().length < 1) {
		alert("La dirección e-mail es obligatoria");
		return false;
	}
	return false;
});

Y para terminar comprobamos que es una dirección e-mail correcta, tipo ejemplo@ejemplo.es, con "texto"arroba"texto"."texto".

$("#formulario").submit(function () {
	if($("#email").val().indexOf('@', 0) == -1 || $("#email").val().indexOf('.', 0) == -1) {
		alert("La dirección e-mail parece incorrecta");
		return false;
	}
	return false;
});

Validar teléfono en formularios con jQuery

29 oct

Después de enseñaros a como validar un campo input normal (nombre, apellidos, población, etc) comprobando que no está vacío y tiene una longitud superior a la que nosotros queramos, vamos a validar ahora un número de teléfono para tener la seguridad de que sea correcto.

Primero vamos a comprobar la longitud del campo, después vamos a comprobar que solo hemos introducido números, y para terminar vamos a comprobar que hemos introducido 9 caracteres, tipo 666112233.

$("#formulario").submit(function () {
	if($("#telefono").val().length < 1) {
		alert("El teléfono es obligatorio");
		return false;
	}
	return false;
});

Ahora vamos a comprobar que el valor escrito, son solo números.

$("#formulario").submit(function () {
	if(isNaN($("#telefono").val())) {
		alert("El teléfono solo debe contener números");
		return false;
	}
	return false;
});

Y para terminar vamos a comprobar la longitud escrita:

$("#formulario").submit(function () {
	if($("#telefono").val().length < 9) {
		alert("El teléfono debe tener 9 caracteres. Ej. 666112233");
		return false;
	}
	return false;
});

Comprobar si un input Radio está “checked” con jQuery

27 oct


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" />

Comprobar el valor de un campo select y modificarlo en jQuery

27 oct

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" />
Página 1 de 212