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 área de texto de validación

Un widget de área de texto de validación es un área de texto que muestra los estados válidos o no válidos cuando el visitante introduce frases de texto. Si el área de texto es un campo obligatorio y el usuario no introduce texto, el widget devuelve un mensaje que indica que el valor es obligatorio.

En el siguiente ejemplo se muestra un widget de área de texto de validación en varios estados:

Widget de área de texto de validación en distintos estados
Widget de área de texto de validación en distintos estados

A. Contador de caracteres restantes B. Widget de área de texto seleccionado, estado de número máximo de caracteres C. Widget de área de texto seleccionado, estado válido D. Widget de área de texto, estado obligatorio E. Contador de caracteres introducidos 

El widget de área de texto 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 área de texto de validación puede hacer validaciones en varios puntos; por ejemplo, cuando el usuario hace clic fuera del widget, cuando escribe 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 sitúa el punto de inserción en el widget.

Estado válido

El estado del widget cuando el usuario ha introducido correctamente la información y el formulario puede enviarse.

Estado obligatorio

El estado del widget cuando el usuario no ha introducido texto.

Estado de número mínimo de caracteres

El estado del widget cuando el usuario ha introducido menos caracteres de los necesarios en el área de texto.

Estado de número máximo de caracteres

El estado del widget cuando el usuario ha introducido más caracteres de los permitidos en el área de texto.

Cuando un widget de área de texto 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 introduce texto en el área de texto, Spry aplica una clase al widget que hace que muestre el mensaje de error “Se necesita un valor”. 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, SpryValidationTextArea.css.

El código HTML predeterminado del widget de área de texto de validación, que normalmente se encuentra dentro de un formulario, consta de una etiqueta <span> de contenedor que rodea la etiqueta <textarea> del área de texto. El código HTML del widget de área de texto 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 área de texto de validación, incluida una anatomía completa del código del widget, consulte www.adobe.com/go/learn_dw_sprytextarea_es.

Inserción y edición del widget de área de texto de validación

Inserción del widget de área de texto de validación

  1. Seleccione Insertar > Spry > Área de texto 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 área de texto 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 área de texto de validación en la ventana de documento.
  2. En el inspector de propiedades (Ventana > Propiedades) seleccione la opción Validar al, 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 campo de texto.

    Cambiar

    Realiza la validación cuando el usuario cambia texto dentro del campo de texto.

    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 del número máximo y mínimo de caracteres

  1. Seleccione un widget de área de texto de validación en la ventana de documento.
  2. En el inspector de propiedades (Ventana > Propiedades), introduzca un número en el cuadro de texto Car. mín o Car. máx. Por ejemplo, si introduce el número 20 en el cuadro Car. mín., el widget solo valida si el usuario introduce 20 caracteres o más en el área de texto.

Adición de un contador de caracteres

Puede añadir un contador de caracteres que permita a los usuarios saber cuántos caracteres han introducido o cuántos les quedan al introducir texto en el área. De forma predeterminada, cuando se añade un contador de caracteres, éste aparece fuera de la esquina inferior derecha del widget.

  1. Seleccione un widget de área de texto de validación en la ventana de documento.
  2. En el inspector de propiedades (Ventana > Propiedades), seleccione la opción Recuento de caracteres o Caracteres restantes.

    Nota:

    La opción Caracteres restantes solo está disponible si ha definido un número máximo de caracteres permitido.

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

  1. Seleccione un widget de área de texto 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.

Cambio del estado obligatorio de un área de texto

De forma predeterminada, todos los widgets de área de texto de validación que inserte con Dreamweaver requieren la introducción de texto por parte del usuario una vez publicados en la Web. Sin embargo, puede hacer opcionales las áreas de texto para su validación.

  1. Seleccione un widget de área de texto de validación en la ventana de documento.
  2. En el inspector de propiedades (Ventana > Propiedades), active o desactive la opción Obligatorio, según desee.

Creación de una sugerencia para un área de texto

Puede añadir una sugerencia al área de texto (por ejemplo “Escriba la descripción aquí”), para que los usuarios sepan el tipo de información que deben introducir en el área de texto. El área de texto muestra el texto de la sugerencia cuando el usuario carga la página en un navegador.

  1. Seleccione un widget de área de texto de validación en la ventana de documento.
  2. En el inspector de propiedades (Ventana > Propiedades), introduzca una sugerencia en el cuadro de texto Sugerencia.

Bloqueo de caracteres extra

Puede impedir que los usuarios introduzcan más caracteres de los permitidos en un widget de área de texto de validación. Por ejemplo, si selecciona esta opción para que un widget acepte más de 20 caracteres, el usuario no podrá escribir más de 20 caracteres en el área de texto.

  1. Seleccione un widget de área de texto de validación en la ventana de documento.
  2. En el inspector de propiedades (Ventana > Propiedades), active la opción Bloquear caracteres extra.

Personalización del widget de área de texto de validación

Aunque el inspector de propiedades permite realizar cambios simples a un widget de área de texto de validación, no admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un widget de área de texto 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_sprytextarea_custom_es.

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

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

  1. Para modificar el estilo del texto de un widget de área de texto 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 que se modifica

    Regla CSS correspondiente

    Propiedades que hay que modificar

    Texto del mensaje de error

    .textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg

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

Cambio de los colores de fondo del widget de área de texto de validación

  1. Para cambiar el color de fondo de un widget de área de texto 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

    .textareaValidState textarea, textarea.textareaValidState

    background-color: #B8F5B1;

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

    textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea

    background-color: #FF9F9F;

    Color del fondo con widget seleccionado

    .textareaFocusState textarea, textarea.textareaFocusState

    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