Como habilitar validación a un formulario multipage en Drupal 7

Mayo 09, 2013

enzo

jQuery

Programación

Drupal

Si llegaste a este entrada es muy probable que tengas problemas con la implementación de formularios muti step o multi page creados usando el módulos Field Group, el problema consiste es que no se realiza validación de la información de los campos aunque sea requerida en form, porque esta validación se lleva acabo al hacer el envió del formulario.

Aunque es un proceso valido podría afectar la experiencia del usuario, por tanto he crear una solución vía jQuery para agregar validación al formulario en cada paso del mismo.

Agregar archivos de js extra.

Lo primero que debemos hacer es mediante el uso del hook_form_later como se muestra a continuación.

function MIMODULO_form_alter(&$form, &$form_state, $form_id) {
  if (strstr($form_id, '_xxx_form') !== FALSE) {
    // Added validation form wizard  multi step form
    //Requerido si estan usando jQuery 1.9 
    drupal_add_js(drupal_get_path('module', 'MIMODULO') . '/js/jquery.validate.js');
    drupal_add_js(drupal_get_path('module', 'MIMODULO') . '/js/wizard_validations.js');

Debemos incluir un nuevo archivo de js validations.js presente en mi módulo personalizado MIMODULO dentro de la carpeta js, ademas si estamos usando jQuery 1.9 disponible en https://github.com/jzaefferer/jquery-validation.

Archivo de validación

El archivo de validación es un mejora de un código encontrado en el Issue # http://drupal.org/node/1340082 y del cual se hizo también un patch para tratar de incluir en la próxima versión del módulo, pueden encontrar el patch en http://drupal.org/node/1340082#comment-7394980 y adjunto en esta entrada.

En código de jQuery se presenta a continuación.

(function ($) {

  // Override nextPage function
  Drupal.multipageControl.prototype.nextPage = function() {
    var form = this.wrapper.closest('form');
    if (this.wrapper.hasClass('multipage-pane')) {
      validated = 1;
      // Remove messages.
      $('div.messages',form).remove();

      // Validation for textfields , selects and textareas required.
      $('input.required, select.required, textarea.required', this.wrapper).each(function(index) {
        if (!form.validate().element(this)) {
          validated = 0;
        }
      });

      $('.form-type-checkboxes .require-one', this.wrapper).each(function(index) {
        if (!form.validate().element(this)) {
                validated = 0;
        }
      });

      // Validation form checkboxes required.
      $('.form-type-checkboxes label span.form-required',this.wrapper).parent().siblings().children().find(':checkbox').first().each(function(index) {
        checkbox_checked_counter = $(this).parent().parent().find(':checkbox:checked').length;

        if(!checkbox_checked_counter) {
          validated = 0;
          label = $(this).parent().parent().parent().find('label').first().text().split(' ');
          $(form).prepend("<div class='messages error'><h2 class='element-invisible'>Error message</h2>" + label[0] + " field is required.</div>");
        }
      });

      // Validation form radio buttons required.
      $('.form-type-radios label span.form-required',this.wrapper).parent().siblings().children().find(':radio').first().each(function(index) {
        radio_checked = $('input[name="' + $(this).attr('name') + '"]:checked',this.wrapper).val();
        if(typeof radio_checked === 'undefined') {
          validated = 0;
          label = $(this).parent().parent().parent().find('label').first().text().split(' ');
          $(form).prepend("<div class='messages error'><h2 class='element-invisible'>Error message</h2>" + label[0] + " field is required.</div>");
        }
      });
    }
    if (validated == 1) {
      this.wrapper.next().data('multipageControl').focus();
    }
    else {
      $('html, body').animate({scrollTop:0}, 'slow');
    }
  }

})(jQuery);

Luego de aplicado este cambio nuestros formularios validaran antes de continuar con el siguiente pago o página como se puede apreciar en la siguiente imagen.

Espero que haya sido de su agrado.