Formularios HTML5 con Firefox 4 y Drupal

Submitted by fabian on Sun, 24/04/2011 - 12:08

El pasado 22 de Marzo, Firefox publicó su versión 4.0 repleta de nuevas funcionalidades, entre las cuales se incluye soporte a formularios HTML5.

La nueva especificación de formularios en HTML5 añade de forma nativa nuevos tipos y atributos de elementos, así como la posibilidad de validar campos de formularios sin necesidad de utilizar librerías externas Javascript.

En nuestros últimos proyectos, ya empezamos a implementar validaciones de formularios en la parte cliente utilizando la librería Jquery Tools Validator. Esta herramienta contemplaba algunos tipos de inputs nuevos de HTML5 como number, email o url y también te realizaba la validación correspondiente.

De esta manera, podíamos integrar formularios en HTML5 y hacer que funcionarán correctamente en todos los navegadores, incluida nuestra querida familia de Internet Explorer.

Sin embargo, estos formularios dejaron de funcionar cuando empezamos a utilizar Firefox 4.0. La validación de campos se realizaba correctamente con Jquery Tools, pero una vez que todo estaba OK, el submit del formulario no funcionaba y, lo peor de todo, no aparecía ningún mensaje de error.

Finalmente, a base de buscar por la red, encontramos un par de artículos que hablaban sobre este problema con Firefox 4.0 y formularios en HTML5. A modo de conclusión, para desactivar la validación nativa de Firefox 4.0 y seguir utilizando la de Jquery Tools Validator, bastaba con añadir el atributo "novalidate" a la etiqueta <form> de tu formulario.

Así pues, decidimos aplicar esta pequeña solución a todos nuestros proyectos en Drupal que utilizaban validación de campos con Javascript. Para ello, basta con añadir el siguiente snippet de código dentro del hook_form_alter de tu módulos Drupal:

/**
 * Implementation of hook_form_alter()
 */
function mymodule_form_alter(&$form, $form_state, $form_id)
{
  if ( !isset($form['#attributes']) )
  {
    $form['#attributes'] = array('novalidate' => 'novalidate');
  }
  else if ( !isset($form['#attributes']['novalidate']) )
  {
    $form['#attributes']['novalidate'] = 'novalidate';
  }
}

Este fragmento de código lo que hace es añadir el atributo "novalidate" a todos los formularios generados en Drupal.
Lógicamente, si solo quieres aplicar este atributo a un formulario en concreto, lo puedes hacer observando la variable $form_id:

/**
 * Implementation of hook_form_alter()
 */
function mymodule_form_alter(&$form, $form_state, $form_id)
{
  if ( $form_id == 'my_form_id')
  {
    if ( !isset($form['#attributes']) )
    {
      $form['#attributes'] = array('novalidate' => 'novalidate');
    }
    else if ( !isset($form['#attributes']['novalidate']) )
    {
      $form['#attributes']['novalidate'] = 'novalidate';
    }
  }
}

Referencias:

Comments

Post new comment

6 + 1 =