Taller de Drupal y Ajax - Comprobar si un nombre de usuario está registrado

En workhabits han publicado hace un par de semanas un ejemplo a modo de taller de cómo validar que el nombre de usuario que elegimos esté disponible en el momento del registro.

He realizado un par de modificaciones y lo he empaquetado en el módulo adjunto que podéis instalar para probar o utilizar en vuestros sitios. Está preparado y probado en Drupal 5.7.

Instrucciones para instalación y demo

Descomprimir el fichero adjunto en nuestro sitio Drupal, en el directorio sites/all/modules/demo_user, después se accede a la página de activación de módulos (www.nuestrositio.com/admin/build/modules) y se activa el módulo Demo User. Aquí dejo una demo de cómo instalar el módulo y de cómo se comporta.

Paso a paso de creación del módulo

Este módulo requiere modificar el formulario de registro de nuevos usuarios, para poder mostrar la comprobación de si el usuario está ya registrado o no:

<?php
/**
* Implemetation of hook_form_alter()
*/
function demo_user_form_alter($form_id, &$form) {
  drupal_add_js(drupal_get_path('module','demo_user').'/demo_user.js');
  if ($form_id == 'user_register') {
    $username_verify_result = '&lt;div class="reg_form_username" id="username_verify" 
     style="display:none;"&gt; 
     &lt;img src="'.base_path().drupal_get_path('module','demo_user').'/progress.gif" /&gt; 
       Validating your username...&lt;/div&gt;';
    $username_status = '&lt;div class="reg_form_username" id="username_status" 
      style="display:none;"&gt;&lt;/div&gt;';
    $form['name']['#suffix'] = $username_verify_result.$username_status;
    //added the call to our JS function
    $form['name']['#attributes'] = array('onblur' =&gt; 'usernameCheck(this)'); 
  }
}
?>

Se añade el fichero javascript que producirá el efecto de validación mediante drupal_add_js() y si el formulario corresponde al de registro de usuarios, se añaden dos elementos <div> ocultos mediante style = "display:none;" que se utilizarán para mostrar el elemento de espera de la validación y el resultado de la misma.

El fichero demo_user.js contiene los efectos javascript (jQuery) que se utilizarán para comprobar la existencia o no del usuario de forma asíncrona:

<?php
function usernameCheck(obj) {
  //Spinner shows while the ajax call does its thing
  $('#username_status').hide();
  $('#username_verify').show();
  $('#username_verify').fadeIn('slow');
  //Callback function that inserts the result of the username check 
  //in the div we set up in Step 1
  function domCallback(msg) {
      $('#username_verify').hide();
      $('#username_status').html(msg);
      $('#username_status').fadeIn('slow');
  }
  //Actually perform the call
  $.ajax({
    type: "GET",
    url: '/test/user/usernamecheck',
    data: "username="+obj.value,
    success: function(msg){
      domCallback(msg);
    }
  });
}
?>

Se utilizan efectos para ocultar hide() y mostrar show() las capas de validación y resultado. Se utiliza una llamada mediante ajax a la url /user/usernamecheck que será capturada por el siguiente código php:

<?php
/**
* Implemetation of hook_menu()
*/
function demo_user_menu($may_cache){
  $items = array();
  if (!$may_cache) {
    $items[] = array(
     'path' =&gt; 'user/usernamecheck',
     'title' =&gt; 'username check',
     'callback' =&gt; 'demo_user_username_check',
     'callback arguments' =&gt; array($_GET['username']),
     'access' =&gt; true,
     'type' =&gt; MENU_CALLBACK,
    );
  }
  return $items;
}
?>

El hook_menu captura la llamada a la url user/usernamecheck y canalizará la llamada hacia la función demo_user_username_check que comprobará la existencia o no del usuario

<?php
/**
* ajax user name check.
*
* Checks for the availability of a given username.
* @author Domenic Santangelo
* @param string $username The desired username
* @return string HTML-ified result of the check.
*/
function demo_user_username_check($username) {
  $result = db_result(db_query("SELECT name 
                 FROM {users} WHERE name = '%s'", $username));
  if($result) {
     $icon = "error.png";
     $msg = " It looks like this username is already in use. Do you want to ". 
     l('retrieve your password?','/user/password');
   }
   else {
     $icon = "ok.png";
     $msg = " The username is avaliable.";
   }
  //If we are working in our local site, a sleep effect could be necessary
  // sleep(3);
  echo "&lt;img src='".base_path().drupal_get_path('module','demo_user')."/".
    $icon."' /&gt;{$msg}";
}
?>

Esta función comprueba en la base de datos si el nombre de usuario introducido existe, si la respuesta es afirmativa, se muestran el mensaje y la imagen de error, si el usuario es único, se muestran el mensaje y la imagen que indican que el usuario está disponible.
Si estamos trabajando en un sitio local de pruebas, deberemos descomentar la línea de sleep(3) para forzar una pausa de 3 segundos que dará la sensación de espera, ya que en local, la respuesta será inmediata.

Existe un módulo llamado Username originality AJAX check para 5.x (no está portado a 6.x) que también realiza esta función, pero con algunas variaciones.