logo

Crear un formulario de registro similar a Facebook con jQuery

Introducción

Facebook es un escaparate de un gran diseño de interfaz de usuario. Y como se ha convertido en una parte importante de nuestras vidas, también ha subido el listón del desarrollo web, empujando a los desarrolladores a cumplir con expectativas más altas.

Sin embargo, esto tiene un lado bueno:desafía a los desarrolladores y diseñadores web a superarse y mejorar constantemente su trabajo.

En este tutorial, aprenderemos de los mejores y crearemos un formulario de registro similar a Facebook. Así que continúa y descarga los archivos de demostración para empezar a aprender!

El XHTML

Comenzamos estableciendo la columna vertebral XHTML, como se ve en index.php en los archivos de demostración:

<div id="div-regForm">

<div class="form-title">Sign Up</div>
<div class="form-sub-title">It's free and anyone can join</div>

<form id="regForm" action="submit.php" method="post">
<table>
<tbody>
<tr>

    <td><label for="fname">First Name:</label></td>
    <td><div class="input-container">
    <input name="fname" id="fname" type="text" />
    </div></td>

</tr>
<tr>

    <td><label for="lname">Last Name:</label></td>
    <td><div class="input-container">
    <input name="lname" id="lname" type="text" />
    </div></td>

</tr>
<tr>

    <td><label for="email">Your Email:</label></td>
    <td><div class="input-container">
    <input name="email" id="email" type="text" />
    </div></td>

</tr>
<tr>

    <td><label for="pass">New Password:</label></td>
    <td><div class="input-container">
    <input name="pass" id="pass" type="password" />
    </div></td>

</tr>
<tr>

    <td><label for="sex-select">I am:</label></td>
    <td>
    <div class="input-container">
    <select name="sex-select" id="sex-select">
    <option value="0">Select Sex:</option>
    <option value="1">Female</option>
    <option value="2">Male</option>
    </select>

    </div>
    </td>
</tr>
<tr>
    <td><label>Birthday:</label></td>
    <td>

    <div class="input-container">

    <select name="month">
    <option value="0">Month:</option>
    <?=generate_options(1,12,'callback_month')?>
    </select>

    <select name="day">
    <option value="0">Day:</option>
    <?=generate_options(1,31)?>
    </select>

    <select name="year">
    <option value="0">Year:</option>
    <?=generate_options(date('Y'),1900)?>
    </select>

    </div>

    </td>

</tr>
<tr>

    <td>&nbsp;</td>
    <td><input type="submit" class="greenButton" value="Sign Up" />
    <img id="loading" src="img/ajax-loader.gif" alt="working.." />
    </td>

</tr>

</tbody>
</table>

</form>

<div id="error">
&nbsp;
</div>

</div>

Comenzamos creando un contenedor div para el formulario, al que le asignamos el id div-regForm . En él vamos a posicionar los distintos componentes del formulario.

Luego creamos los encabezados del formulario, debidamente estilizado con CSS, como verás más adelante.

Luego tenemos la forma en sí. Una nota aquí sería recordar que el formulario en realidad no se envía solo; todo se hace a través de AJAX, lo que significa que realmente no importa lo que vayas a poner en el método y acción atributos.

Dentro del formulario, colocamos una tabla que nos permitirá crear fácilmente un diseño de cuadrícula para las etiquetas y campos del formulario. Ha habido un debate sobre el uso de tablas de esta manera desde que el diseño div se puso de moda, pero tenga en cuenta que facebook mismo está usando la misma técnica, que automáticamente lo gana para mí.

Cada campo de entrada tiene una etiqueta respectiva elemento que sirve como, lo adivinaste, una etiqueta de campo. Incluso estamos usando para atributo, lo que significa que al hacer clic en la etiqueta, selecciona el cuadro de texto a la derecha.

Luego viene un cuadro de selección y después de esto tenemos 3 líneas muy interesantes, que he resaltado para ti. Usamos una pequeña función de PHP para generar todas las opciones elementos que van en los cuadros de selección que comprenden la selección de una fecha de nacimiento. Hablaremos de esto en un minuto.

Más tarde tenemos el botón Registrarse y un pequeño gif, que está oculto de forma predeterminada y solo se muestra cuando las solicitudes de AJAX están en curso.

El último elemento div es nuestro contenedor de errores, también oculto por defecto.

El CSS

Para convertir nuestra codificación XHML simple en algo llamativo y similar a Facebook, necesitamos un estilo serio.

Echemos un vistazo a nuestro CSS, tal como se define en demo.css .

/* Page styles */

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
    margin:0px;
    padding:0px;
}

body{
    margin-top:20px;
    font-family:Arial, Helvetica, sans-serif;
    color:#51555C;
    height:100%;

    font-size:11px;
}

/* Form styles */

input,select{
    padding:3px;
    color:#333333;

    border:1px solid #96A6C5;
    margin-top:2px;
    width:200px;
    font-size:11px;
}

select{
    width:auto;
    padding:2px;
}

.formline{
    padding:3px;
}

label{
    font-size:11px;
    text-align:right;
}

table{
    width:300px;
}

td{
    font-size:11px;
}

.input-container{
    padding:1px;
}

#div-regForm,.registered{
    border:3px solid #eeeeee;
    padding:15px;

    background:url(img/bg.jpg) repeat-x #cbd4e4;
    color:#203360;

    margin:30px auto 40px auto;
    width:400px;
}

.form-title,
.form-sub-title{
    font-size:20px;

    font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
    font-size:20px;
    font-weight:bold;
}

.form-sub-title{
    font-weight:normal;
    padding:6px 0 15px 0;
}

.greenButton{
    width:auto;
    margin:10px 0 0 2px;
    padding:3px 4px 3px 4px;
    color:white;
    background-color:#589d39;
    outline:none;
    border:1px solid #006600;
    font-weight:bold;
}

.greenButton:active{
    background-color:#006600;
    padding:4px 3px 2px 5px;
}

#loading{
    left:10px;
    position:relative;
    top:3px;
    visibility:hidden;
}

#error{
    background-color:#ffebe8;
    border:1px solid #dd3c10;
    padding:7px 3px;
    text-align:center;
    margin-top:10px;
    visibility:hidden;
}

Las líneas 1-6 son donde restablecemos algunos de los elementos XHTML, para garantizar que aparezcan iguales en todos los navegadores.

Seguimos con el estilismo de la carrocería sección y comience a diseñar los elementos del formulario.

Los primeros elementos que diseñamos son input y seleccionar . Select comparte la mayor parte de su estilo con input, pero también difiere en ancho y relleno, por lo que agregamos un conjunto adicional de estilos para cubrirlos.

Se trata principalmente de anchos y rellenos hasta la línea 81, donde diseñamos nuestro botón de registro. Tenemos estilos tanto para el normal , estado no presionado y activo , estado presionado. Lo que hace el estado activo es que mueve la etiqueta de texto del botón hacia abajo, a la derecha con un píxel, mientras oscurece el fondo, lo que da la ilusión de que se presiona el botón.

Los dos últimos estilos son #loading y #error , que seleccionan los elementos respectivos por sus ID y los ocultan con visibility:hidden por defecto. Solo los mostraremos con jQuery cuando sea apropiado.

El código PHP

Recuerda, cuando hace unos minutos mencioné sobre las generar_opciones Función PHP?
Aquí está, tomado directamente de nuestro functions.php archivo:

function generate_options($from,$to,$callback=false)
{
    $reverse=false;

    if($from>$to)
    {
        $tmp=$from;
        $from=$to;
        $to=$tmp;

        $reverse=true;
    }

    $return_string=array();
    for($i=$from;$i<=$to;$i++)
    {
        $return_string[]='
        <option value="'.$i.'">'.($callback?$callback($i):$i).'</option>
        ';
    }

    if($reverse)
    {
        $return_string=array_reverse($return_string);
    }

    return join('',$return_string);
}

function callback_month($month)
{
    return date('M',mktime(0,0,0,$month,1));
}

/* and here is how we use it (taken from our XHTML code above):
generate_options(1,31);             // generate days
generate_options(date('Y'),1900);           // generate years, in reverse
generate_options(1,12,'callback_month');        // generate months
*/

Esta es una pequeña y ordenada paz de código. Ahora vamos a explicar lo que hace.

Lo primero que notará en nuestras generar_opciones función son los parámetros $from y $a para el rango de opciones a generar (días, meses y años en nuestro caso), y un parámetro opcional $callback , que es una función de devolución de llamada (más sobre eso en un momento).

Dentro de la función, definimos $reverse como falso Si usamos la función de la siguiente manera:generar_opciones(1,31) , solo estamos generando una serie de elementos de opción y mostrándolos en el mismo orden. Si cambiamos las posiciones de los parámetros, la salida es en orden inverso.

Esto es exactamente lo que hacemos en línea 5 . Verificamos si el rango de $from y $a se invierte y establece $reverse a verdadero . Pero al mismo tiempo, estamos intercambiando sus valores, de modo que usamos los mismos para construir como en nuestra generación normal. Si no hubiéramos hecho esto, habríamos tenido que escribir otro para hacer este trabajo.

A continuación, llenamos una matriz llamada $return_string con las opciones generadas, invirtiéndolas si es necesario y emitiéndolas como una cadena uniendo los elementos de la matriz.

Recuerda la $devolución de llamada hablé antes? Aquí viene su parte. En la línea 18, verificamos si se proporcionó una $devolución de llamada, como en generar_opciones(1,12,'devolución_de_llamada') , y si lo fuera, ejecutamos la función y suministramos el $i actual valor del contador. En la práctica es lo mismo que si estuviéramos haciendo callback_month($i) .

Más tarde tenemos el callback_month función, que usamos como devolución de llamada en la generación del mes. Básicamente toma un parámetro entero (nuestro $i arriba) y devuelve el nombre del mes como una cadena.

La fuente jQuery

Bien, ahora que hemos completado el aspecto del formulario, debemos poder enviar los datos al backend de PHP donde se procesan. Para este propósito, usamos jQuery, que puede incluir en la página colocando estas líneas de código en la sección de encabezado de su página:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

La biblioteca se incluye automáticamente desde la CDN de Google. Después de eso, puede usar el método ajax de jQuery.

Aquí está el código ubicado en script.js .

$(document).ready(function(){

    // UPDATE: commented out because the submit() method was added below instead
    //$('.greenButton').click(function(){
    //  register();

    //});

    $('#regForm').submit(function(e) {

        register();
        e.preventDefault();

    });

});

function register()
{
    hideshow('loading',1);
    error(0);

    $.ajax({
        type: "POST",
        url: "submit.php",
        data: $('#regForm').serialize(),
        dataType: "json",
        success: function(msg){

            if(parseInt(msg.status)==1)
            {
                window.location=msg.txt;
            }
            else if(parseInt(msg.status)==0)
            {
                error(1,msg.txt);
            }

            hideshow('loading',0);
        }
    });

}

function hideshow(el,act)
{
    if(act) $('#'+el).css('visibility','visible');
    else $('#'+el).css('visibility','hidden');
}

function error(act,txt)
{
    hideshow('error',act);
    if(txt) $('#error').html(txt);
}

Las primeras líneas de código en $(document).ready ejecutarse después de que la página se haya cargado y vincular nuestro registrar() función con el evento onsubmit del formulario utilizando preventDefault() para evitar que se envíe el formulario.

Y aquí está la simplicidad de $.ajax método (línea 23):en unas pocas líneas de código enviamos a submit.php por POST todo formulario campos de (regForm es el ID de nuestro formulario de registro). Recibimos una respuesta en formato JSON (para más información más adelante) que es procesada por la función dada en éxito . En este ejemplo (líneas 30-37), procesamos el objeto devuelto y decidimos si mostrar un error o redirigir a una página solo para usuarios registrados.

Posteriormente tenemos el hideshow() función que oculta o muestra un elemento en la página (por ejemplo, la animación gif giratoria en nuestro formulario) y el error función que gestiona la visualización de errores en el formulario.

Pero, ¿cómo decidimos si la información en el formulario es correcta y dónde redirigir al usuario si lo es?

Esto se hace en submit.php :

// we check if everything is filled in

if(empty($_POST['fname']) || empty($_POST['lname']) || empty($_POST['email']) || empty($_POST['pass']))
{
    die('{status:0,txt:"All the fields are required"}');
}

// is the sex selected?

if(!(int)$_POST['sex-select'])
{
    die('{status:0,txt:"You have to select your sex"}');
}

// is the birthday selected?

if(!(int)$_POST['day'] || !(int)$_POST['month'] || !(int)$_POST['year'])
{
    die('{status:0,txt:"You have to fill in your birthday"}');
}

// is the email valid?

if(!(preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['email'])))
    die('{status:0,txt:"You haven\'t provided a valid email"}');

echo '{status:1,txt:"registered.html"}';

Aquí revisamos algunas de las situaciones de error más típicas. Cada mensaje que enviamos debe formatearse como un objeto JavaScript con estado y texto propiedades. Son accesibles en nuestro AJAX como msg.txt y msg.status . La idea principal aquí es que los errores devuelven un estado con un valor de 0 y un registro exitoso devuelve un estado 1, siendo txt una URL de un recurso accesible solo para usuarios registrados.

*Nota que tendrá que agregar código para insertar nuevos registros de base de datos, crear sesiones y algunas comprobaciones de errores más por su cuenta, según sus necesidades.

Y con eso nuestro formulario está terminado.

Conclusión

Hoy creamos una página de registro elegante y funcional, inspirada nada menos que en Facebook. Usamos con éxito jQuery y el método $.ajax para crear un formulario de registro asíncrono en tiempo real, completo con verificación de errores y redireccionamientos del navegador.