Seleccione Insertar > Spry > Grupo de opciones de validación de Spry.
Última actualización el
3 may. 2021
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.
Acerca del widget de grupo de opciones de validación
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.
Inserción y edición del widget de grupo de opciones de validación
Inserción del widget de grupo de opciones de validación
-
-
En el cuadro de texto Nombre, introduzca un nombre para el grupo de opciones.
-
Añada o quite botones de opciones del grupo haciendo clic en los botones de signo (+) o menos (-).
-
En la columna Label, haga clic en el nombre de cada botón de opción para que el campo sea editable y asigne un nombre exclusivo a cada botón de opción.
-
En la columna Value, haga clic en cada valor para que el campo sea editable y asigne un valor exclusivo a cada botón de opción.
-
(Opcional) Haga clic en un botón de opción o en su valor para seleccionar una fila concreta y luego haga clic en las flechas arriba o abajo para desplazar la fila hacia arriba o hacia abajo.
-
Seleccione un tipo de disposición para el grupo de opciones.
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).
-
Haga clic en Aceptar.
Nota:
También puede insertar un widget de grupo de opciones a través de la categoría Spry del panel Insertar.
Especificación del momento en que debe producirse la validación
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.
-
Seleccione un widget de grupo de opciones de validación en la ventana de documento haciendo clic en su ficha azul.
-
En el inspector de propiedades (Ventana > Propiedades), seleccione la opción que indica cuándo desea que se produzca la validación. Puede seleccionar todas las opciones o solo Enviar.
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.
Visualización de los estados de widget en la vista de Diseño
-
Seleccione un widget de grupo de opciones de validación en la ventana de documento haciendo clic en su ficha azul.
-
En el inspector de propiedades (Ventana > Propiedades), seleccione el estado que desea ver en el menú emergente Estados de vista previa. Por ejemplo, seleccione Inicial para ver el widget en su estado inicial.
Cambio del estado obligatorio de botones de opciones
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.
-
Seleccione un widget de grupo de opciones de validación en la ventana de documento haciendo clic en su ficha azul.
-
En el inspector de propiedades (Ventana > Propiedades), anule la selección de la opción Obligatorio.
Especificación de un valor vacío o no válido
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”.
-
Seleccione el botón de opción del widget de grupo de opciones que desea utilizar para el botón de opción vacío o no válido. Al especificar valores vacíos o no válidos para el widget, deberán existir los correspondientes botones de opciones con dichos valores ya asignados.
-
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.
-
Seleccione el widget de grupo de opciones de validación haciendo clic en la ficha azul del widget.
-
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.
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.
Personalización del widget de grupo de opciones
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.
Aplicación de estilo a un widget de grupo de opciones de validación (instrucciones generales)
-
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.
Aplicación de estilo al texto del mensaje de error del widget de grupo de opciones de validación
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;