jQuery UI Tabs Widget – Tutorial cómo validar datos organizados en pestañas

Cómo validar los datos usando jQueryUI Tabs y jQuery Validation plugin. El escenario es un ingreso de datos en el que los campos de entrada se encuentran distribuidos en varias pestañas, una diagramación igual a cuando se crea un asistente o wizard; las pestañas están creadas jQueryUI Tabs.

Este tutorial se llama jQuery Tutorial: Validation with the jQuery UI Tabs Widget y fue publicado por professionalaspnet.com.

Implementación

Primero – Código HTML del formulario y las pestañas:

<form id="MultiTabValidation" action="MultiTabValidation.aspx" method="post">
<div id="tabs">
<ul>
<li><a href="#FirstTab">General Information</a></li>
<li><a href="#PhoneTab">Phone Information</a></li>
</ul>
<div id="FirstTab">
<fieldset>
<legend>User Information</legend>
<ul>
<li>
<label for="txtName">
Name</label><input type="text" id="txtFirstName" class="required"></input></li>
<li>
<button id="btnToPhoneNumber" name="btnToPhoneNumber" type="button">
Next ></button></li>
</ul>
</fieldset>
</div>
<div id="PhoneTab">
<fieldset>
<legend>Phone Number</legend>
<ul>
<li>
<label for="txtPhone">
Phone</label><input type="text" id="txtPhone" class="phone required"></input></li>
<li>
<button id="btnToGeneral" name="btnToGeneral" type="button">
< Prev</button>
<button id="btnSubmit" name="btnSubmit" type="button">
Submit</button></li>
</ul>
</fieldset>
</div>
</div>
</form>

En este ejemplo hay que ingresar el nombre y el teléfono, el cual debe tener un formato válido.

El código es muy sencillo ya que es un simple HTML que define el formulario y con distintos divs, se crea el contenido en cada una de las pestañas.

Segundo – Código Javascript

jQuery.fn.validateTab = function (toTab) {
var isValid = true;
$(this).find("input, select").each(function () {
if (isValid) {
isValid = $(this).valid();
} else {
$(this).valid();
}
});
if (isValid) {
if (!toTab) {
toTab = 0;
}
$("#tabs").tabs('select', toTab);
}
return false;
}

El código de arriba recorre el DOM de la página y revisa si los campos contienen información válida.

Una vez que todos los elementos pasan la validación, se selecciona la pestaña (tab):

$("#tabs").tabs('select', toTab);

Tercero – Documento listo

$(document).ready(function () {
$('#btnToPhoneNumber').click(function (e) {
e.preventDefault();
$("#FirstTab").validateTab(1);
});
$('#btnToGeneral').click(function (e) {
e.preventDefault();
$("#PhoneTab").validateTab(0);
});
});

En la función document.ready hay manejadores de eventos para los clics. Cada manejador de eventos llama a la función jQuery PreventDefault para mantener el documento en el estado en donde se deben realizar las acciones requeridas. También hay una llamada al plugin validateTab que pasa el índice de la siguiente pestaña.

Corolario

Este tutorial está explicado en detalle (en inglés) y resulta especialmente útil para crear asistentes o para cuando es necesario que el usuario ingrese mucha información, de esta forma se puede hacer el proceso más ordenadamente agrupando los datos en distintas pestañas.

En general me pareció muy interesante, aunque tengo que reconocer que el código requiere prestar algo de atención para entender cabalmente como hacer una implementación de este tipo

jQuery Tutorial: Validation with the jQuery UI Tabs Widget

Visitar tutorial: professionalaspnet.com/archive/2010/05/12/jQuery-Tutorial_3A00_-Validation-with-the-jQuery-UI-Tabs-Widget.aspx