Updates:
Status: Done
Labels: -Type-Defect Type-Other
Comment #1 on issue 229 by
serg...@gmail.com: Componentes RUP - Wizard
https://code.google.com/p/uda/issues/detail?id=229
Hola,
El componente RUP Validate no se integra directamente con el Wizard del
mismo modo que con el componente Form.
Sin embargo es posible aplicar las validaciones sobre el formulario del
Wizard de manera independiente. En el código de ejemplo que aparece a
continuación se va a implementar lo siguiente:
* Uso del componente RUP Validate para validar los campos.
* Definir las reglas de validación mediante rules del componente.
* Mostrar los errores de validación en un feedback y al lado de los campos
correspondientes.
* Realizar la validación de los campos antes de navegar a la segunda
pestaña del wizard.
Para ello se deberá de implementar lo siguiente:
* Crear un feedback donde se vayan a mostrar los errores de validación.
[wizard.jsp]
<div id="feedbackErroresValidaciones"></div>
[wizard.js]
// Feedback
var $feedbackErroresValidaciones =
jQuery("#feedbackErroresValidaciones").rup_feedback({
closeLink: true,
block:false
});
* Aplicaremos sobre el formulario del wizard el componente Validate con la
configuración de reglas correspondiente:
[wizard.jsp]
<form id="wizardForm">
<fieldset>
// Paso 1 del Wizard...
<label for="username">Usuario</label> <input id="username" name="username"
type="text" />
<label for="password">Password</label> <input id="password"
name="password" type="password" />
</fieldset>
<fieldset>
// Paso 2 del Wizard...
</fieldset>
<fieldset>
// Paso 3 del Wizard...
</fieldset>
</form>
[wizard.js]
jQuery("#wizardForm").rup_validate({
feedback: $feedbackErroresValidaciones,
rules:{
"username":{required:true},
"password":{required:true}
}
});
* Implementamos en la configuración del componente RUP Wizard la validación
que se ha de llevar a cabo antes de navegar al segundo paso.
[wizard.js]
$("#wizardForm").rup_wizard({
// Resto de configuración del componente Wizard
stepFnc : {
2 : function (){
var valid = true, validator =
jQuery("#wizardForm").validate();
valid = validator.element("#username") && valid;
valid = validator.element("#password") && valid;
return valid;
}
}
});
La validación de los campos debe de realizarse campo por campo en caso de
que solo se desee validar los campos de ese paso.
En caso se querer validar el formulario en su totalidad se puede realizar
mediante la siguiente sentencia:
jQuery("#wizardForm").validate().form();
Un saludo,
UDA