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 selección de validación

Un widget de selección de validación de Spry es un menú desplegable que muestra los estados válido y no válido cuando el usuario realiza una selección. Por ejemplo, puede insertar un widget de selección de validación que contenga una lista de estados, agrupados en diferentes secciones y divididos por líneas horizontales. Si el usuario selecciona de forma accidental una de las líneas de división en lugar de uno de los estados, el widget de selección de validación devuelve un mensaje al usuario indicando que la selección no es válida.

En el siguiente ejemplo se muestra un widget de selección de validación ampliado, así como la forma contraída del widget en distintos estados:

Widget de selección de validación
Widget de selección de validación

A. Widget de selección de validación seleccionado B. Widget de selección, estado válido C. Widget de selección, estado obligatorio D. Widget de selección, estado no válido 

El widget de selección de validación incluye varios estados (por ejemplo, válido, no válido, valor obligatorio, etc.). Modifique las propiedades de estos estados en el inspector de propiedades, en función de los resultados de validación deseados. Un widget de selección de validación puede hacer validaciones en varios puntos; por ejemplo, cuando el usuario hace clic fuera del widget, cuando realiza selecciones o cuando intenta enviar el formulario.

Estado inicial

El estado del widget cuando la página se carga en el navegador o cuando el usuario reinicia el formulario.

Estado de foco

El estado del widget cuando el usuario hace clic en él.

Estado válido

El estado del widget cuando el usuario ha seleccionado un elemento válido y el formulario puede enviarse.

Estado no válido

El estado del widget cuando el usuario ha seleccionado un elemento no válido.

Estado obligatorio

El estado del widget cuando el usuario no ha seleccionado un elemento válido.

Cuando un widget de selección de validación introduce uno de estos estados 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 ha seleccionado un elemento del menú, Spry aplica una clase al widget que hace que muestre el mensaje de error “Seleccione un elemento”. Las reglas que controlan el estilo y muestran los estados de mensajes de error se encuentran en el archivo CSS que acompaña al widget, SpryValidationSelect.css.

El código HTML predeterminado del widget de selección de validación, que normalmente se encuentra dentro de un formulario, consta de una etiqueta <span> de contenedor que rodea la etiqueta <select> del área de texto. El código HTML del widget de selección de validación también incluye etiquetas script en el encabezado del documento y detrás del formato HTML del widget.

Para una explicación detallada sobre el funcionamiento del widget de selección de validación, incluida una anatomía completa del código del widget de selección de validación, consulte www.adobe.com/go/learn_dw_spryselect_es.

Inserción y edición del widget de selección de validación

Inserción del widget de selección de validación

  1. Seleccione Insertar > Spry > Selección de validación de Spry.
  2. Complete el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada y haga clic en Aceptar.
  3. En la vista de Código, añada las etiquetas de opción que contienen los elementos y valores de menú. Dreamweaver no realiza esta operación de forma automática. Para obtener más información, consulte los temas anteriores.

Nota:

También puede insertar un widget de selección de validación 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 escribe o cuando intenta enviar el formulario.

  1. Seleccione un widget de selección de validación en la ventana de documento.
  2. 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 widget.

    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

  1. Seleccione un widget de selección de validación en la ventana de documento.
  2. En el inspector de propiedades (Ventana > Propiedades), seleccione el estado que desea ver en el menú emergente Estados de vista previa. Por ejemplo, si desea ver el widget en su estado válido, seleccione Válido.

Prohibición o autorización de valores en blanco

De forma predeterminada, todos los widgets de selección de validación que inserte con Dreamweaver requerirán que los usuarios seleccionen elementos de menú que tengan un valor asociado una vez publicado el widget en la Web. Sin embargo, puede desactivar esta opción.

  1. Seleccione un widget de selección de validación en la ventana de documento.
  2. En el inspector de propiedades (Ventana > Propiedades), active o desactive la opción No permitir valor en blanco, según desee.

Especificación de un valor no válido

Puede especificar un valor que se registrará como no válido si el usuario selecciona un elemento de menú que está asociado al mismo. Por ejemplo, si especifica -1 como valor no válido y lo asigna a una etiqueta de opción, el widget devolverá un mensaje de error si el usuario selecciona ese elemento de menú.

<option value="-1"> ------------------- </option>
  1. Seleccione un widget de selección de validación en la ventana de documento.
  2. En el inspector de propiedades (Ventana > Propiedades), introduzca un número para utilizarlo como valor no válido en el cuadro Valor no válido.

Personalización del widget de selección de validación

Aunque el inspector de propiedades permite realizar cambios simples a un widget de selección de validación, no admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un widget de selección de validación y crear un widget con el estilo que desee.

Todas las reglas CSS de los siguientes temas se refieren a las reglas predeterminadas que se encuentran en el archivo SpryValidationSelect.css. Dreamweaver guarda el archivo SpryValidationSelect.css en la carpeta SpryAssets de su sitio cuando crea un widget de selección 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 selección 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 al texto del mensaje de error del widget de selección de validación

De forma predeterminada, los mensajes de error del widget de selección de validación aparecen en rojo con un borde de 1 píxel alrededor del texto.

  1. Para modificar el estilo del texto de los mensajes de error de un widget de selección de validación, utilice la tabla siguiente para localizar 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

    .selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg

    color: #CC3333; border: 1px solid #CC3333;

Cambio de los colores de fondo del widget de selección de validación

  1. Para cambiar el color de fondo de un widget de selección de validación, utilice la siguiente tabla para localizar la regla CSS correspondiente y, a continuación, modifique los valores de color de fondo predeterminado:

    Color de fondo que se cambia

    Regla CSS correspondiente

    Propiedad que se va a modificar

    Color de fondo de un widget en estado válido

    .selectValidState select, select.selectValidState

    background-color: #B8F5B1;

    Color de fondo de un widget en estado no válido

    select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select

    background-color: #FF9F9F;

    Color del fondo con widget seleccionado

    .selectFocusState select, select.selectFocusState

    background-color: #FFFFCC;

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea