Seleccione Insertar > Spry > Selección de validación de Spry.
Última actualización el
May 03, 2021 09:21:23 PM GMT
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:
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
-
-
Complete el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada y haga clic en Aceptar.
-
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.
-
Seleccione un widget de selección de validación en la ventana de documento.
-
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
-
Seleccione un widget de selección de validación en la ventana de documento.
-
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.
-
Seleccione un widget de selección de validación en la ventana de documento.
-
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>
-
Seleccione un widget de selección de validación en la ventana de documento.
-
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.
-
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
-
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;
Páginas relacionadas
Inicia sesión en tu cuenta