Hoy os presentamos jQuery Alert Dialogs, un substituto del típico alert(), confirm() y prompt() de Javascript, con el que podemos darle un toque más estético y profesional a nuestro sitio web.

Para empezar tendremos que añadir jAlert después de incluir jQuery como en el ejemplo:

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

Ahora que ya tenemos incluido el script, vamos a hacer la primera prueba con el el substituto de alert:

jAlert("Actualidad jQuery", "Actualidad jQuery");

En la primera variable le añadiremos el texto que aparecerá dentro de la ventana, y en la segunda variable, el título de la ventana jAlert.

Ahora vamos a probar con confirm, que ahora será jConfirm:

jConfirm("¿Te gusta Actualidad jQuery?", "Actualidad jQuery", function(r) {
	if(r) {
		jAlert("Te gusta Actualidad jQuery", "Actualidad jQuery");
	} else {
		jAlert("No te gusta Actualidad jQuery", "Actualidad jQuery");
	}
});

Dependiendo de si hacemos click en Continuar o Cancelar, nos devolverá la variable r con el valor true o false.

Y para terminar vamos a probar con prompt, que ahora será jPrompt:

jPrompt("Introduce tu nombre", "", "Actualidad jQuery", function(r) {
	if(r) {
		jAlert("Tu nombre es "+r, "Actualidad jQuery");
	}
});

Al igual que en el ejemplo anterior, la variable r nos devolverá el texto que hayamos introducido en la ventana.

A continuación tenéis un ejemplo con alert(), confirm(), prompt(), jAlert(), jConfirm() y jPrompt(), para que veáis sus diferencias.

• Ejemplo
  
• Descarga jAlert 1.1

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

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

• Ejemplo

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

• Ejemplo

Normalmente solo necesitamos validar que el campo ha sido rellenado, pero para comprobar la veracidad de los datos a veces es necesario tener en cuenta el número de caracteres. Por ejemplo en los campos de teléfono, para validar que un número tiene 9 caracteres y que los caracteres introducidos son numéricos.

Primero vamos a comprobar que el campo no está vacío:

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

De esta forma nos aseguramos que el campo no está vacio, pero mejor vamos a validar que la longitud como mínimo es de 5 caracteres:

	$("#formulario").submit(function () {
		if($("#nombre").val().length < 5) {
			alert("El nombre debe tener como mínimo 5 caracteres");
			return false;
		}
		return false;
	});

• Ejemplo