Editando apunte: Sistema de comentarios paso a paso: Validar con javascript

Editando apunte: Sistema de comentarios paso a paso: Validar con javascript cerrar apuntes

ID: 117 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Globalización, Programación
Etiquetas: bitácora, blog, diario, javascript, sociedad, webmaster
Extras: bitácora, blog, diario, javascript, sociedad, webmaster
apunte: - - - - - - - -

<p>
	[rss]Podemos mejorar nuestros formularios evitando que se envíen cuando no se han completado correctamente[/rss],
	Y no está de más añadir algún código de seguridad para evitar el <a href="http://es.wikipedia.org/wiki/Spam">spam</a>.
	Antes de continuar recomendamos leer este viejo tutorial: <a href="http://www.caricatos.net/articulos/formularios.php">El abc de los formularios</a>, en especial la parte titulada "Validando en el navegador (javascript)".
</p>
<p>
	[rss]Siempre que pensamos en programar con javascript debemos considerar que nuestros visitantes pueden desactivarlo, no por ello haya que descartarse.[/rss]
</p>
<h3 class="subtitulo">
	Conceptos básicos
</h3>
<p>
	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).
</p>
<p>
	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.
</p>
<p>
	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.).
</p>
<p>
	[rss]Para terminar pondremos el típico código de seguridad para evitar el odioso spam[/rss], aunque no será sofisticado al ser este formulario tan solo un ejemplo para
aplicar la validación.
</p>
<p>
	Usaremos código no intrusivo, así que tendremos que añadir nuestra validación al cargarse la página.
</p>
<h3 class="subtitulo">
	El código
</h3>

<p>
	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.
</p>
<pre class="codigo">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;
	}
}</pre>

<p>
	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.
</p>
<p>
	Probaremos nuestro código con el formulario que vemos a continuación y luego lo comentaremos.
</p>

<form id="formulario_de_ejemplo" action="javascript: alert('El formulario se ha enviado.')" style="margin: 1em; padding: 1em; border: 1px solid black"><input type="hidden" name="PHPSESSID" value="lslln85m2kubfav3ekpq1eboc2" />
<h4 >Formulario de ejemplo</h4>
<label for="ejemplo_comentario">Comentario</label>:<br/>
<textarea name="comentario" id="ejemplo_comentario" style="width: 100%; height: 50px">

Autor del comentario Nombre:
Tratamiento: Sr. Sra.

Código de seguridad

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

Código:

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.

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación

Validando textos y radios