Nota:
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.
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.
Nota:
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.
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”.
-
En el inspector de propiedades de botón de opción (Ventana > Propiedades), asigne el botón de opción a un valor activado. Para crear un botón de opción con un valor vacío, escriba none en el cuadro de texto Valor activado. Para crear un botón de opción con un valor no válido, escriba invalid en el cuadro de texto Valor activado.
-
En el inspector de propiedades, especifique los valores vacío o no válido. Para crear un widget que muestre el mensaje error de valor vacío “Realice una selección”, escriba none en el cuadro de texto Valor vacío. Para crear un widget que muestre el mensaje error de valor no válido “Seleccione un valor válido”, escriba invalid en el cuadro de texto Valor no válido.
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.
Nota:
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.
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;
Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.