Validación de campos de un formulario con JavaScript

A través del siguiente Script vamos a validar los campos de un formulario, indicando los posibles errores al usuario mediante alertas.

En la mayoría de formularios podemos encontrar los siguientes tipos de campos:

  • Texto (Nombre, Apellidos, Dirección, Comentarios)
  • Numérico (Teléfono, Código Postal, Edad)
  • Email
  • Lista/Menú (Provincia, Sexo)
  • Checkbox (Condiciones Generales, Aviso Legal)

Colocamos el Script antes de la etiqueta </head>

//Abrimos el Script
<script type="text/javascript">

//Nombramos la función
function valida_envia(){

//Definimos los caracteres permitidos en una dirección de correo electrónico
var regexp = /^[0-9a-zA-Z._.-]+\@[0-9a-zA-Z._.-]+\.[0-9a-zA-Z]+$/;

//Validamos un campo o área de texto, por ejemplo el campo nombre
if (document.form.nombre.value.length==0){
alert("Tiene que escribir su nombre");
document.form.nombre.focus();
return 0;
}

//Validamos un campo de texto como numérico, por ejemplo el campo teléfono de 9 dígitos
valor = document.form.telefono.value;
if( !(/^\d{9}$/.test(valor)) ) {
alert("Tiene que escribir un teléfono de 9 dígitos");
document.form.telefono.focus();
return 0;
}

//Validamos un campo de texto como email
if ((regexp.test(document.form.email.value) == 0) || (document.form.email.value.length = 0)){
alert("Introduzca una dirección de email válida");
document.form.email.focus();
return 0;
} else {
var c_email=true;
}

//Validamos un campo de lista/menú, por ejemplo el campo provincia
if (document.form.provincia.selectedIndex==0){
alert("Tiene que seleccionar su provincia");
document.form.provincia.focus();
return 0;
}

//Validamos un campo de tipo checkbox, por ejemplo condiciones
if (document.form.condiciones.checked==0){
alert("Debe aceptar las condiciones");
document.form.condiciones.focus();
return 0;
}

//Si todos los campos han validado correctamente, se envía el formulario
document.form.submit();
}

//Cerramos el Script
</script>

Ejecutamos la función cuando el usuario hace clic en el botón enviar de nuestro formulario.

<label><input type="button" id="enviar" onclick="valida_envia()"/></label>

Descargar ejemplo.

Añadir imágenes en Blogger

Hace unos días comencé mi aventura como bloguero, y elegí Blogger como plataforma; sin embargo, una vez dados los primeros pasos y escritos los primeros posts, pude comprobar como las imágenes cargadas mediante el propio gestor, sufrían una pérdida de calidad. Dichas imágenes son almacenadas en nuestra cuenta de Picasa.

Para solucionarlo, probé cargar previamente las imágenes en Picasa y copiar las rutas de las imágenes que quería añadir a mi post e insertarlas directamente en vista código o "Edición de HTML", o también, a través del propio gestor de Blogger en la opción "O añadir una imagen de la Web" y pegando las rutas en el campo "URL".

neo 2.0 - Añadir imágenes en Blogger - 1

A continuación podéis ver un ejemplo con una de las imágenes empleadas en el post anterior (el efecto se aprecia mejor en los textos):

Imagen cargada e insertada mediante el gestor de Blogger, con la opción "Añadir una imagen desde su equipo".

neo 2.0 - Añadir imágenes en Blogger - 2

Imagen cargada con Picasa y posteriormente insertada pegando la ruta o enlace, mediante la opción "O añadir una imagen de la Web" o directamente en "Edición de HTML".

neo 2.0 - Añadir imágenes en Blogger - 3

Aún siendo la misma imagen, se aprecia claramente una pérdida de calidad.

Para añadir una imagen en Picasa, y tras iniciar nuestra sesión de usuario, encontraremos un álbum creado por Blogger con el mismo nombre que nuestro blog, el cual contiene todas las imágenes que hayamos ido cargado en nuestros posts.

Abrimos el álbum, y hacemos clic en "Añadir fotos".

neo 2.0 - Añadir imágenes en Blogger - 4

Se abrirá una nueva pantalla dónde deberemos arrastrar o seleccionar las fotografías que queramos añadir desde nuestro equipo. Una vez seleccionadas hacemos clic en "Aceptar".

Posteriormente, seleccionamos la imagen que queremos añadir a nuestro post haciendo clic sobre la imagen, ahora se mostrará la imagen y los diferentes parámetros de la misma en el menú lateral derecho; en la parte inferior hacemos clic en "Enlace a esta foto" para desplegar las diferentes opciones:

neo 2.0 - Añadir imágenes en Blogger - 5

  • Enlace: es la ruta a la fotografía en nuestro álbum de Picasa.
  • Incrustar imagen: es la ruta (o código) que copiaremos para añadirla a nuestro post tras definir algunos parámetros.
  • Seleccionar el tamaño: elegimos una opción de entre cuatro (Miniatura, Pequeña, Mediana, Tamaño original).
  • Ocultar enlace al álbum: marcamos esta opción si no queremos mostrar un enlace a nuestro álbum justo debajo de la imagen.
  • Sólo imagen (no enlace): marcamos esta opción si no queremos que la imagen contenga un enlace a nuestra imagen en el álbum de Picasa.

Una vez definidos los diferente parámetros, copiamos el código del campo incrustar imagen e insertamos la imagen en Blogger siguiendo los pasos explicados anteriormente.

Email Marketing (Doméstico)

A continuación vamos a ver cómo enviar a través de Outlook Express un boletín o emailing a una pequeña base de datos. Lo primero será arrancar el programa, para ello hacemos clic en "Inicio > Programas > Outlook Express".

neo 2.0 - Email Marketing (Doméstico) - 1

Una vez hayamos iniciado el programa, hacemos clic en "Crear correo".

neo 2.0 - Email Marketing (Doméstico) - 2

Después, hacemos clic en "Ver" > "Todos los encabezados" y en "Modificar código fuente". La primera opción nos mostrará además del campo "De", "Para", "CC" (con copia) y el "Asunto", el campo "CCO" (con copia oculta), el cual necesitaremos posteriormente.

neo 2.0 - Email Marketing (Doméstico) - 3

Y la segunda opción "Modificar código fuente" nos permitirá copiar nuestro código HTML en el mensaje. En la parte inferior del mensaje, ahora se muestran tres pestañas: "Modificar", "Código Fuente" y "Vista Previa".

neo 2.0 - Email Marketing (Doméstico) - 4

En la primera de ellas, "Modificar", podremos editar el mensaje en vista diseño. En "Código fuente" podremos editar el mensaje escribiendo directamente el código HTML o como será nuestro caso copiando y pegando el código previamente creado, y por último la "Vista previa" que nos mostrará una previsualización de cómo se verá el mensaje. Normalmente al cambiar de la pestaña "Vista previa" a "Modificar" hay grandes variaciones en el diseño, sin embargo, la "Vista previa" nos da la reproducción más exacta de cómo se verá el mensaje.

neo 2.0 - Email Marketing (Doméstico) - 5

Pero antes de copiar y pegar nuestro código HTML, haremos un pequeño cambio en la configuración por defecto de Outlook para evitar que se envíen las imágenes empeladas en nuestro diseño como archivos adjuntos, ya que esas imágenes estarán alojadas en un servidor.

En Outlook (no en el mensaje que hemos creado nuevo), hacemos clic en "Herramientas" > "Opciones".

neo 2.0 - Email Marketing (Doméstico) - 6

Se nos abre un cuadro de diálogo "Opciones" dividido en pestañas. Hacemos clic en la pestaña "Enviar" y luego clic en "Configuración de HTML".

neo 2.0 - Email Marketing (Doméstico) - 7

Desactivamos la casilla de verificación "Enviar imágenes con los mensajes".

neo 2.0 - Email Marketing (Doméstico) - 8

De lo contrario, todas las imágenes utilizadas en nuestro diseño se enviarían como archivos adjuntos de nuestro mensaje. Una vez desactivada esta opción, clic en "Aceptar" para cerrar este cuadro de diálogo y nuevamente clic en "Aceptar" para cerrar el cuadro de diálogo anterior "Opciones".

neo 2.0 - Email Marketing (Doméstico) - 9

Ahora abrimos nuestro emailing o boletín, por ejemplo a través de un navegador Web. Yo lo abriré con Internet Explorer porque tiene una opción para este tipo de envío, que me resulta cómoda, pero más adelante veremos este paso con cualquier otro navegador.

Hacemos clic en "Archivo" > "Enviar" > "Página por correo electrónico".

neo 2.0 - Email Marketing (Doméstico) - 10

Si nuestro programa por defecto para el envío de correo electrónico es Outlook Express, se nos abrirá un nuevo mensaje con nuestro código HTML.

Para comprobar cuál es el programa de correo configurado por defecto, puedes hacer clic con el botón derecho del ratón sobre el icono de Internet Explorer, se abrirá un cuadro contextual, clic en "Propiedades". A continuación se mostrará un cuadro de diálogo: "Opciones de Internet", compuesto por varias pestañas, haz clic en "Programas", contiene un listado con los programas configurados por defecto para realizar determinadas tareas, como el envío de correo electrónico.

Ya tenemos nuestro boletín en un nuevo mensaje de correo.

neo 2.0 - Email Marketing (Doméstico) - 11

Pero antes de enviarlo, cambiaremos a la pestaña "Código fuente" donde eliminaremos una línea de código que nos ha añadido IE, se trata de un <DIV> como puedes ver en la siguiente imagen, produciendo un espacio que no existía en nuestro diseño original. Puedes comprobarlo en la pestaña "Vista previa".

neo 2.0 - Email Marketing (Doméstico) - 12

Lo seleccionamos y lo eliminamos.

neo 2.0 - Email Marketing (Doméstico) - 13

Cambiamos a la pestaña "Vista previa" para comprobar su correcta visualización.

neo 2.0 - Email Marketing (Doméstico) - 14

Una vez comprobado que todo está correcto, rellenaremos los campos "Para", "CCO" y "Asunto". En el campo "Para" haremos coincidir la dirección del destinatario con la del remitente, es decir, será la misma que "De" (nos lo enviaremos a nosotros mismos) y en "CCO"* añadiremos un máximo de 100 direcciones de correo en cada envío. Si nuestra base de datos está compuesta por 1000 direcciones**, tendremos que repetir el proceso 10 veces, incluyendo en cada uno 100 direcciones de correo distintas en el campo "CCO".

*Cuidado: utilizamos el campo "CCO" (con copia oculta) y no "CC" (con copia), para evitar que otros destinatarios puedan ver las direcciones de correo incluidas y así evitar el SPAM; además de cumplir con la LOPD (Ley Orgánica de Protección de Datos).

**No se recomienda emplear este método para una base de datos mayor de 1500 direcciones de correo ya que podría identificarse nuestra cuenta de email como spammer y ser bloqueada.

Y por último, añadiremos el campo "Asunto".

Como hemos dicho anteriormente, también podremos copiar y pegar directamente nuestro código HTML en la pestaña "Código fuente". Abrimos nuestro boletín en cualquier navegador, por ejemplo Chrome, hacemos "Ctrl + U" para ver el código fuente:

neo 2.0 - Email Marketing (Doméstico) - 15

Y hacemos "Ctrl + A" para seleccionar todo, después "Ctrl + C" para copiarlo.

neo 2.0 - Email Marketing (Doméstico) - 16

Volvemos a Outlook Express, clic en "Crear correo", nos vamos a la pestaña "Código fuente"; seleccionamos el código y lo borramos.

neo 2.0 - Email Marketing (Doméstico) - 17

Ahora hacemos "Ctrl + V" para pegar el código HTML de nuestro boletín.

neo 2.0 - Email Marketing (Doméstico) - 18

Una vez hecho esto, y repitiendo los pasos ya explicados anteriormente, tenemos listo nuestro boletín para ser enviado a nuestra pequeña base de datos.

Entradas populares

Sobre el autor

Mi foto

Me llamo Juan Ignacio Estévez. Soy técnico publicitario por el Centro Español de Nuevas Profesiones (CENP).

Comencé desarrollando mi carrera profesional en estudios de diseño y agencias de publicidad como director de arte, siempre enfocado al mundo Offline. Sin embargo, pronto sentí curiosidad por el Online. Desde entonces, he intentado formarme en este sector, a través de diferentes cursos de formación y de forma autodidacta.

Puedes ver mi perfil completo en LinkedIn. ¿Hacemos Networking?