logo El diario de Pepe Molina (Caricatos)

yo

Podemos mejorar nuestros formularios evitando que se envíen cuando no se han completado correctamente


Última caricatura

Andrés Iniesta: Futbolista español. En la actualidad juega en el Barcelona.

Andrés Iniesta

RSS de las imágenes: rss


La Cita

El secreto de las películas es que son una ilusión

George Lucas, director de cina estadounidense.


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Sistema de comentarios paso a paso: Validar con javascript

emoticón de Caricatos Publicado el día 04 de marzo de 2013
id=117; categorías: Vicisitudes de un Webmaster, Globalización, Programación

Podemos mejorar nuestros formularios evitando que se envíen cuando no se han completado correctamente, Y no está de más añadir algún código de seguridad para evitar el spam. Antes de continuar recomendamos leer este viejo tutorial: El abc de los formularios, en especial la parte titulada "Validando en el navegador (javascript)".

Siempre que pensamos en programar con javascript debemos considerar que nuestros visitantes pueden desactivarlo, no por ello haya que descartarse.

Conceptos básicos

Como todo tipo de formulario, debe tener un botón de envío (tipo submit), y para evitar la dependencia de javascript, debemos tener también un sistema de validación en el servidor; en nuestro caso con el lenguaje php (será un próximo apunte).

Pondremos un sencillo ejemplo de formulario que al enviarse mostrará un mensaje de alerta. Estará compuesto de varios campos que se validarán de distintas maneras. Uno de esos campos que siempre existen es uno de comentario, mensaje, sugerencia o similar que debemos evitar que se quede vacío.

Aunque no se trate de un campo importante, para este ejemplo de validación, consideraremos el autor del comentario un campo obligatorio, así como su tratamiento (Sr., Sra.).

Para terminar pondremos el típico código de seguridad para evitar el odioso spam, aunque no será sofisticado al ser este formulario tan solo un ejemplo para aplicar la validación.

Usaremos código no intrusivo, así que tendremos que añadir nuestra validación al cargarse la página.

El código

Lo primero es obtener el formulario por el id y asociar el evento submit con la rutina de validación. Antes de continuar recordaremos códigos que necesitaremos para nuestro cometido.

function tag(id) {return document.getElementById(id);};
function poner_evento(elemento, evento, f)	{
	if (document.addEventListener)
		elemento.addEventListener(evento, f, true);
	else
		if (document.attachEvent)
			elemento.attachEvent("on" + evento, f);
		else
			elemento["on" + evento] = f;
}

function cancelar_evento(e) {
	if (!e) e = window.event;
	if (e.preventDefault) {
		e.preventDefault();
	} else {
		e.returnValue = false;
	}
}

El primer código :"tag", es un alias de "document.getElementById" para acortar nuestro código. Luego "poner_evento" equivale a "addEventListener/attachEvent", y por último "cancelar_evento" es casi equivalente a "return false", que nos ayudará a cancelar el envío del formulario.

Probaremos nuestro código con el formulario que vemos a continuación y luego lo comentaremos.

Formulario de ejemplo

:
Autor del comentario :
Tratamiento:
Código de seguridad

En el recuadro código de seguridad inserte el resultado de la siguiente operación: 5 x 5

:

Al no tratarse de un código sofisticado (tal vez nos dediquemos a ello en futuros apuntes), realizaremos controles muy básicos. El comportamiento será de chequeo de los distintos campos obligatorios, añadiendo a un array de errores una advertencia por cada elemento que no pase la validación.

Validando textos y radios

En este apunte solo controlaremos que los campos de texto requeridos no queden vacíos sin considerar la coherencia del contenido.

Con los controles del tipo radio, al ser varios con un mismo nombre -en este caso tan solo dos (2)-, hay que controlar que al menos uno de esos controles esté chequeado.

El código lo mostramos a continuación:

function validar_ejemplo(e) {
	errores = [];
	if (this.comentario.value == "")
		errores.push("Debe escribir en el recuadro para el comentario.");
	if (this.nombre.value == "")
		errores.push("Debe indicarnos su nombre.");
	if (!(this.trato[0].checked || this.trato[1].checked))
		errores.push("Indíquenos el tratamiento que debemos darle.");
	if (this.seguridad.value == "")
		errores.push("Rellene el código de seguridad con el resultado de la operación expuesta.");
	if (errores.length > 0)	{
		alert(errores.join("\n"));
		cancelar_evento(e);
	}
}

La función validar_ejemplo es muy sencilla y no creo que merezca explicación, aunque es un ejemplo para demostrar que no es necesario el uso de extensas librerías para una sencilla validación.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.117) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 10825 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

http://www.pepemolina.com/postales/Fondos/santa.gif
http://www.pepemolina.com/postales/animales/gato8t.gif
Feliz Navidad
Feliz Navidad
enlace a la postal
Copyright © 2002-2017 www.pepemolina.com
RSS rss | Ver Mapa del sitio