Alejandro Arco Alejandro Arco

Validar formularios accesibles sin onsubmit

accesibilidad 2 Comentarios »

accesibilidad-web - Validar formularios accesibles sin onsubmitHace unos meses publiqué un artículo denominado formularios accesibles con javascript, para ello usaba el atributo onsubmit de la etiqueta form para validar el formulario web con javascript.

A continuación, explicaré con un ejemplo como implementar en nuestro desarrollo web, javascript no intrusivo para validar formularios accesibles sin onsubmit.

Ventajas validar formularios accesibles sin onsubmit

  • Se cumplen los estándares web del W3C.
  • Se cumplen las pautas de accesibilidad web.
  • Código HTML más limpio y compacto.
  • No es necesario tener javascript habilitado.
  • Compatible con la totalidad de navegadores web.

Ejemplo validar formularios accesibles sin onsubmit

Descarga el ejemplo validar formularios accesibles sin onsubmit.

Para validar formularios web lo primero que debemos hacer es embeber el código javascript o cargarlo mediante un fichero externo entre las etiquetas head de nuestro código html:


<script type="text/javascript">
/**
 * Validar Formulario Accesible sin onSubmit
 * (c) 2009 Alejandro Arco
 * Por Alejandro Arco - http://www.alejandroarco.es
 */
validateForm=function() {
	var nombre = new Array(document.getElementById('nombre'), document.frm['nombre'].value);
	var apellidos = new Array(document.getElementById('apellidos'), document.frm['apellidos'].value);
	var email = new Array(document.getElementById('email'), document.frm['email'].value);
	var telefono = new Array(document.getElementById('telefono'), document.frm['telefono'].value);
	var consulta = new Array(document.getElementById('consulta'), document.frm['consulta'].value);
	var submit = document.getElementById('submit');	

	/* Eventos */
	nombre[0].onfocus = onFocus; nombre[0].onblur = onBlur;
	apellidos[0].onfocus = onFocus; apellidos[0].onblur = onBlur;
	email[0].onfocus = onFocus; email[0].onblur = onBlur;
	telefono[0].onfocus = onFocus; telefono[0].onblur = onBlur;
	consulta[0].onfocus = onFocus; consulta[0].onblur = onBlur;
	submit.onclick = validateFields;

	/* Funciones */
	function onFocus() { if(document.frm[this.name].value==eval(this.name)[1]) document.frm[this.name].value='' }	

	function onBlur() {
		var value = document.frm[this.name].value;
		value = value.replace(/^\s*/, ''); value = value.replace(/\s*$/, '');
		if(!value) document.frm[this.name].value = eval(this.name)[1]
	}

	function validateFields() {
		if(document.frm['nombre'].value == nombre[1]) { document.frm['nombre'].focus(); alert('El campo "nombre" es obligatorio.'); }
		else if(document.frm['apellidos'].value == apellidos[1]) { document.frm['apellidos'].focus(); alert('El campo "apellidos" es obligatorio.'); }
		else if(document.frm['email'].value == email[1]) { document.frm['email'].focus(); alert('El campo "email" es obligatorio.'); }
		else if(document.frm['consulta'].value == consulta[1]) { document.frm['consulta'].focus(); alert('El campo "consulta" es obligatorio.'); }
		else { return true; }
		return false;
	}
}

if(document.all&&window.attachEvent) { window.attachEvent("onload",validateForm); } // IE-Win
else if(window.addEventListener) { window.addEventListener("load",validateForm,false); } // Otros
</script>

Posteriormente, crearemos nuestro formulario web accesible y añadiremos su código entre las etiquetas body de nuestro contenido HTML.


  <form name="frm" action="#submit" enctype="multipart/form-data" method="post">
    <fieldset>
	  <legend>Formulario accesible</legend>
	  <p>Ejemplo de <strong>formulario accesible</strong> con <em>javascript</em> sin uso del atributo <em>onsubmit</em>, no olvide que todos los campos marcados con (*) son obligatorios.</p>
	  <label for="nombre">Nombre *</label><input name="nombre" id="nombre" accesskey="n" tabindex="1" value="- nombre -" type="text" />
	  <label for="apellidos">Apellidos *</label><input name="apellidos" id="apellidos" accesskey="a" tabindex="2" value="- apellidos -" type="text" />
	  <label for="email">Email *</label><input name="email" id="email" accesskey="e" tabindex="3" value="- email -" type="text" />
	  <label for="telefono">Teléfono</label> <input name="telefono" id="telefono" accesskey="t" tabindex="4" value="- teléfono -" type="text" />
	  <label for="consulta">Consulta *</label><textarea name="consulta" id="consulta" accesskey="c" tabindex="5" cols="1" rows="1">- consulta -</textarea>
	  <label for="submit"><input name="submit" id="submit" accesskey="s" tabindex="6" value="Enviar" type="submit" /></label>
	</fieldset>
  </form>

En este ejemplo no hacemos uso del atributo onsubmit para validar nuestro formulario web mediante javascript no intrusivo, de este modo, obtenemos un código html más limpio y compacto.

Si tenéis alguna duda referente a la validación de formularios web accesibles sin onsubmit, dejadme un comentario en este artículo y lo responderé gustosamente. ¿Habéis validado anteriormente formularios web con javascript no intrusivo?

Primeras impresiones Google Caffeine

buscadores 1 Comentario »

google-caffeine - Primeras impresiones Google CaffeineGoogle ha publicado recientemente una nueva actualización de su algoritmo en modo sandbox, una plataforma de prueba denominada Google Caffeine para testear el nuevo motor de búsqueda y la arquitectura del mismo.

¿Tendremos que modificar pautas en el desarrollo web tras la implementación de Google Caffeine?

Primeras impresiones Google Caffeine

Podéis acceder al sandbox para geolocalización en España de google caffeine a través del siguiente enlace: sandbox google caffeine españa.

test-google-caffeine - Primeras impresiones Google Caffeine

  • Google Caffeine muestra los resultados de búsqueda más rapidamente.
  • Google Caffeine obtiene un índice de resultados mayor de la búsqueda.
  • Google Caffeine indexa más rápidamente los contenidos.
  • Google Caffeine visualiza resultados más precisos y relevantes (generalmente).
  • Google Caffeine valora más positivamente las redes sociales como twitter.
  • Google Caffeine premia más la naturalidad de los enlaces que la cantidad.

Hace unas semanas Microsoft y Yahoo! cerraron un acuerdo contra Google, ¿habrá sido casualidad que unas semanas más tarde aparezca Google Caffeine?

¿Cómo agregar tu web a Bing?

buscadores 2 Comentarios »

logo-bing - ¿Cómo agregar tu web a Bing?Si tu página web aún no ha sido rastreada e indexada por MSNBot de Bing, puedes realizar una petición para agregar tu web a Bing y también agregar un sitemap a Bing.

Para ello tenemos dos opciones, usar la nueva plataforma para desarrolladores Bing ToolBox (similar a Google Webmasters Tools) y/o realizar una petición directa para agregar tu web a Bing (debes iniciar una sesión de Windows Live ID):

Después de agregar la web a bing debemos verificar la titularidad del desarrollo web añadiendo una META etiqueta o subiendo un fichero .XML a la raíz de nuestra página web.

Microsoft y Yahoo! se unen contra Google

buscadores 1 Comentario »

yahoo-bing - Microsoft y Yahoo! se unen contra GoogleRecientemente Microsoft y Yahoo! cerrarón un acuerdo de colaboración durante los próximos 10 años, e intentarán hacer frente a Google uniendo experiencias, conocimientos y servicios.

De este modo, Yahoo! facilitará la tecnología de búsqueda de su buscador a Microsoft y este último le cederá la gestión publicitaria SEM (Search Engine Marketing) de su nuevo buscador Bing a Yahoo!.

Características del acuerdo entre Microsoft y Yahoo!

  • La duración actual del acuerdo tendrá una vigencia de 10 años.
  • El motor de búsqueda de Bing será implementado en Yahoo! Search.
  • Yahoo! gestionará los enlaces patrocinados mediante la herramienta Microsoft AdCenter, quien gestionará los importes.
  • Durante los primeros 5 años, Microsoft pagará a Yahoo! el 88% de los ingresos generados por las búsquedas de Yahoo! y afiliados.
  • Yahoo! podrá actualizar la interfaz y mejorar la experiencia del usuario de forma independiente, aunque siempre mostrando los resultados de Bing.

¿Este acuerdo puede llegar a representar una seria amenaza al liderazgo del buscador Google, y el SEM en este mismo medio?

Publicado por Alejandro Arco.Gracias WordPress & N.Design Studio.