Los widgets de Spry se han sustituido por widgets jQuery en Dreamweaver CC y versiones posteriores. Aunque todavía pueden modificarse los widgets de Spry existentes en la página, no se pueden agregar nuevos widgets de Spry.
El widget de grupo de opciones de validación es un grupo de botones de opciones que permiten la validación de la selección. El widget fuerza la selección de un botón de opción del grupo.
En el siguiente ejemplo se muestra un widget de grupo de opciones de validación en varios estados.
A. Mensajes de error del widget de grupo de opciones de validación B. Grupo del widget de grupo de opciones de validación
El widget de grupo de opciones de validación incluye tres estados al margen del estado inicial: válido, no válido y obligatorio. Puede modificar las propiedades de estos estados editando el correspondiente archivo CSS (SpryValidationRadio.css), en función de los resultados de validación deseados. Un widget de grupo de opciones de validación puede hacer validaciones en varios puntos: cuando el usuario hace clic fuera del widget, cuando realiza selecciones o cuando intenta enviar el formulario.
Estado inicial
Cuando la página se carga en el navegador o cuando el usuario reinicia el formulario.
Estado válido
Cuando el usuario realiza una selección y se puede enviar el formulario.
Estado obligatorio
Cuando el usuario no ha realizado una selección obligatoria.
Estado no válido
Cuando el usuario selecciona un botón de opción cuyo valor no es aceptable.
Cuando un widget de grupo de opciones de validación introduce uno de estos valores tras la interacción del usuario, la lógica del framework de Spry aplica una clase CSS específica al contenedor HTML para el widget en tiempo de ejecución. Por ejemplo, si un usuario intenta enviar un formulario pero no realiza ninguna selección, Spry aplica una clase al widget que hace que muestre el mensaje de error “Realice una selección”. Las reglas que controlan el estilo y muestran los estados de mensajes de error se encuentran en el archivo que acompaña al widget, SpryValidationRadio.css.
El código HTML predeterminado para el widget de grupo de opciones de validación, normalmente situado dentro de un formulario, consta de una etiqueta span de contenedor que rodea a la etiqueta input type="radio" del grupo de opciones. El código HTML del widget de grupo de opciones de validación también incluye etiquetas script en el encabezado del documento y detrás del código HTML del widget.
Para una explicación detallada sobre el funcionamiento del widget de grupo de opciones de validación, incluida una anatomía completa del código del widget de grupo de opciones de validación, consulte www.adobe.com/go/learn_dw_spryradio_es.
Saltos de línea
Sitúa cada botón de opción en una línea independiente empleando saltos de línea (etiquetas br).
Tabla
Sitúa cada botón de opción en una línea independiente empleando filas de tabla individuales (etiquetas tr).
También puede insertar un widget de grupo de opciones a través de la categoría Spry del panel Insertar.
Puede definir el punto en el que debe producirse la validación: cuando el usuario hace clic fuera del widget, mientras realiza selecciones o cuando intenta enviar el formulario.
Desenfocar
Realiza la validación cuando el usuario hace clic fuera del grupo de opciones.
Cambiar
Realiza la validación cuando el usuario realiza selecciones.
Enviar
Realiza la validación cuando el usuario intenta enviar el formulario. La opción de envío está seleccionada de forma predeterminada y no se puede anular.
De manera predeterminada, los widgets de grupo de opciones de validación exigen que el usuario realice una selección antes de enviar el formulario. Sin embargo, puede hacer que la selección de opciones sea opcional para el usuario.
Puede especificar un valor que se registrará como vacío o no válido si el usuario selecciona un botón de opción asociado a uno de estos valores. Si el usuario selecciona un botón de opción con un valor vacío, el navegador devolverá el mensaje de error “Realice una selección”. Si el usuario selecciona un botón de opción con un valor no válido, el navegador devolverá el mensaje de error “Seleccione un valor válido”.
Recuerde que tanto el botón de opción propiamente dicho como el widget de grupo de opciones deben tener los valores none o invalid asignados para que los mensajes de error se muestren correctamente.
Aunque el inspector de propiedades permite realizar cambios simples a un widget de grupo de opciones de validación, no admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un widget de grupo de opciones de validación y crear un widget con el estilo que desee. Para ver una lista detallada de tareas de estilo, consulte www.adobe.com/go/learn_dw_spryradio_custom_es.
Todas las reglas CSS de los siguientes temas se refieren a las reglas predeterminadas que se encuentran en el archivo SpryValidationRadio.css. Dreamweaver guarda el archivo SpryValidationRadio.css en la carpeta SpryAssets de su sitio cuando crea un widget del grupo de opciones de validación de Spry. Resulta útil consultar este archivo porque contiene información comentada sobre los distintos tipos de estilos que se pueden aplicar al widget.
Aunque es fácil editar las reglas para el widget de grupo de opciones de validación directamente en el archivo CSS, también puede utilizar el panel Estilos CSS para editar el código CSS del widget. El panel Estilos CSS resulta útil para ubicar las clases CSS asignadas a partes distintas del widget, en especial si utiliza el modo Actual del panel.
Abra el archivo SpryValidationRadio.css.
Localice la regla CSS correspondiente a la parte del widget que desea cambiar. Por ejemplo, para cambiar el color de fondo del estado obligatorio del widget de grupo de opciones, edite la regla radioRequiredState en el archivo SpryValidationRadio.css.
Realice los cambios deseados en la regla CSS y guarde el archivo.
El archivo SpryValidationRadio.css contiene comentarios completos que explican el código y el objetivo de determinadas reglas. Para más información, consulte los comentarios en el archivo.
De forma predeterminada, los mensajes de error del widget de grupo de opciones de validación aparecen en rojo con un borde sólido de 1 píxel alrededor del texto.
Para modificar el estilo del texto de los mensajes de error de un widget de grupo de opciones de validación, utilice la tabla siguiente para ubicar la regla CSS correspondiente y, a continuación, modifique las propiedades predeterminadas o añada sus propiedades y valores de estilo de texto.
Texto al que se aplica el estilo |
Regla CSS correspondiente |
Propiedades que hay que modificar |
---|---|---|
Texto del mensaje de error |
.radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg | color: #CC3333; border: 1px solid #CC3333; |
Inicia sesión en tu cuenta