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

Un widget de casilla de verificación de validación es una casilla de verificación o grupo de casillas de verificación de un formulario HTML que muestran los estados válido o no válido cuando el usuario selecciona una casilla de verificación o cuando no la selecciona. Por ejemplo, puede añadir un widget de casilla de verificación de validación a un formulario en el que el usuario tenga que realizar tres selecciones. Si el usuario no realiza las tres selecciones, el widget devuelve un mensaje indicando que no se ha realizado el número mínimo de selecciones.

En el siguiente ejemplo se muestra un widget de casilla de verificación de validación en varios estados:

Widget de casilla de verificación de validación en varios estados
Widget de casilla de verificación de validación en varios estados

A. Widget de casilla de verificación de validación, grupo, estado de número mínimo de selecciones B. Widget de casilla de verificación de validación, estado obligatorio 

El widget de casilla de verificació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 casilla de verificació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 válido

El estado del widget cuando el usuario ha realizado una selección, o el número correcto de selecciones, y el formulario puede enviarse.

Estado obligatorio

El estado del widget cuando el usuario no ha seleccionado un elemento obligatorio.

Estado de número mínimo de selecciones

El estado del widget cuando el usuario ha seleccionado un número de casillas de verificación inferior al mínimo permitido.

Estado de número máximo de selecciones

El estado del widget cuando el usuario ha seleccionado un número de casillas de verificación superior al máximo permitido.

Cuando un widget de casilla de verificación 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 ha realizado ninguna selección, Spry aplica una clase al widget que hace que muestre el mensaje de error “Elija una opción”. 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, SpryValidationCheckbox.css.

El código HTML predeterminado del widget de casilla de verificación de validación, que normalmente se encuentra dentro de un formulario, consta de una etiqueta <span> de contenedor que rodea la etiqueta <input type="checkbox"> del la casilla de verificación. El código HTML del widget de casilla de verificació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 casilla de verificación de validación, incluida una anatomía completa del código del widget de casilla de verificación de validación, consulte www.adobe.com/go/learn_dw_sprycheckbox_es.

Inserción y edición del widget de casilla de verificación de validación

Inserción del widget de casilla de verificación de validación

  1. Seleccione Insertar > Spry > Casilla de verificació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.

Nota:

También puede insertar un widget de casilla de verificació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 realiza selecciones o cuando intenta enviar el formulario.

  1. Seleccione una casilla de verificació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 de la casilla de verificación.

    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.

Especificación de un rango de selección mínimo y máximo

De forma predeterminada, un widget de casilla de verificación de validación está configurado como obligatorio. Sin embargo, si inserta un número de casillas de verificación en su página, puede especificar un rango de selección mínimo y máximo. Por ejemplo, si tiene seis casillas de verificación dentro de la etiqueta <span> para un solo widget de casilla de verificación de validación y desea asegurarse de que el usuario selecciona al menos tres de las casillas, puede establecer dicha preferencia para todo el widget.

  1. Seleccione una casilla de verificación de validación en la ventana de documento.
  2. En el inspector de propiedades (Ventana > Propiedades), seleccione la opción Aplicar rango.
  3. Introduzca un número mínimo o máximo (o ambos) de casillas de verificación que desea que seleccione el usuario.

Visualización de los estados de widget en la vista de Diseño

  1. Seleccione una casilla de verificació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, seleccione Inicial para ver el widget en su estado inicial.

Personalización de los mensajes de error del widget de casilla de verificación de validación

De forma predeterminada, los mensajes de error del widget de casilla de verificación de validación aparecen en rojo con un borde de 1 píxel alrededor del texto. Puede modificar las reglas CSS de un widget de casilla de verificación 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_sprycheckbox_custom_es.

  1. Abra el archivo SpryValidationCheckbox.css.

    Dreamweaver guarda el archivo SpryValidationCheckbox.css en la carpeta SpryAssets del sitio cuando crea un widget de la casilla de verificació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.

  2. Utilice las siguientes tablas 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

    .checkboxRequiredState .checkboxRequiredMsg, .checkboxMinSelectionsState .checkboxMinSelectionsMsg, .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg

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

    Nota:

    Aunque es fácil editar las reglas para el widget de casilla de verificació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.

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