Seleccione Insertar > Spry > Campo de texto 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 campo de texto de validación
Un widget de campo de texto de validación es un campo de texto que muestra los estados válidos o no válidos cuando el visitante introduce texto. Por ejemplo, puede añadir un widget de campo de texto de validación a un formulario en el que el visitante introduce su dirección de correo electrónico. Si no introducen el símbolo “@” y un punto en la dirección de correo electrónico, el widget devuelve un mensaje indicando que la información introducida por el usuario no es válida.
En el siguiente ejemplo se muestra un widget de campo de texto de validación en varios estados:
A. Widget de campo de texto, sugerencia activada B. Widget de campo de texto, estado válido C. Widget de campo de texto, estado no válido D. Widget de campo de texto, estado obligatorio
El widget de campo 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 campo de texto de validación puede hacer validaciones en varios puntos; por ejemplo, cuando un visitante hace clic fuera del widget, cuando escribe o cuando intenta enviar un 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 no válido
El estado del widget cuando el usuario ha introducido texto en un formato no válido. (Por ejemplo, 06 para indicar el año en lugar de 2006).
Estado obligatorio
El estado del widget cuando el usuario no introduce el texto obligatorio en el campo de 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 campo de texto.
Estado de número máximo de caracteres
El estado del widget cuando el usuario ha introducido más caracteres de los necesarios en el campo de texto.
Estado de valor mínimo
El estado del widget cuando el usuario ha introducido un valor inferior al valor necesario en el campo de texto. (Se aplica a validaciones de enteros, números reales y tipos de datos).
Estado de valor máximo
El estado del widget cuando el usuario ha introducido un valor superior al valor necesario en el campo de texto. (Se aplica a validaciones de enteros, números reales y tipos de datos).
Cuando un widget de campo 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 un campo de texto obligatorio, 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, SpryValidationTextField.css.
El código HTML predeterminado del widget de campo de texto de validación, que normalmente se encuentra dentro de un formulario, consta de una etiqueta <span> de contenedor que rodea la etiqueta <input> del campo de texto. El código HTML del widget de campo 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 campo de texto de validación, incluida una anatomía completa del código del widget, consulte www.adobe.com/go/learn_dw_sprytextfield_es.
Inserción y edición del widget de campo de texto de validación
Inserción del widget de campo de texto de validación
-
-
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 campo de texto de validación a través de la categoría Spry del panel Insertar.
Especificación de un tipo y formato de validación
Puede especificar distintos tipos de validación para el widget de campo de texto de validación. Por ejemplo, puede especificar un tipo de validación de tarjeta de crédito si en el campo de texto van a introducirse números de tarjetas de crédito.
-
Seleccione un widget de campo de texto de validación en la ventana de documento.
-
En el inspector de propiedades (Ventana > Propiedades), seleccione un tipo de validación en el menú Tipo.
-
En caso necesario, seleccione una opción de formato en el menú emergente Formato.
La mayoría de los tipos de validación hace que el campo de texto espere un formato estándar. Por ejemplo, si aplica el tipo de validación Entero a un campo de texto, el widget no hará la validación a menos que el usuario introduzca números en el campo de texto. Sin embargo, algunos tipos de validación permiten elegir el tipo de formato que va a aceptar el campo de texto. En la siguiente tabla se enumeran los tipos y formatos de validación disponibles a través del inspector de propiedades:
Tipo de validación |
Formato |
|---|---|
Ninguno |
No requiere un tipo particular de formato. |
Entero |
El campo de texto solo acepta números. |
Dirección de correo electrónico |
El campo de texto acepta direcciones de correo electrónico que contienen @ y un punto (.) precedido y seguido de al menos una letra. |
Fecha |
Los formatos varían. Elija una opción en el menú emergente Formato del inspector de propiedades. |
Hora |
Los formatos varían. Elija una opción en el menú emergente Formato del inspector de propiedades. (“tt” es el formato am/pm; “t” es el formato a/p). |
Tarjeta de crédito |
Los formatos varían. Elija una opción en el menú emergente Formato del inspector de propiedades. Puede elegir aceptar todas las tarjetas de crédito o especificar un determinado tipo de tarjeta (MasterCard, Visa, etc.). El campo de texto no acepta espacios en los números de tarjetas de crédito, a saber, 4321 3456 4567 4567. |
Código postal |
Los formatos varían. Elija una opción en el menú emergente Formato del inspector de propiedades. |
Número telefónico |
El campo de texto acepta números de teléfono con el formato utilizado en EE.UU. y Canadá (000) 000-0000 o formatos personalizados. Si selecciona como opción un formato personalizado, introduzca el formato, por ejemplo, 000.00(00), en el cuadro de texto Patrón. |
Número de Seguridad Social |
El cuadro de texto acepta números de la Seguridad Social con el formato 000-00-0000. Si desea utilizar un formato distinto, seleccione Personalizado como tipo de validación y especifique un patrón. El mecanismo de validación del patrón solo acepta caracteres ASCII. |
Moneda |
El campo de texto acepta moneda con el formato 1.000.000,00 o 1,000,000.00. |
Número real-Notación científica |
Valida varios tipos de números: enteros (por ejemplo, 1); valores flotantes (por ejemplo, 12, 123); y valores flotantes en notación científica (por ejemplo, 1,212e+12, 1,221e-12, donde e se utiliza como potencia de 10). |
Dirección IP |
Los formatos varían. Elija una opción en el menú emergente Formato del inspector de propiedades. |
URL |
El campo de texto acepta URL con el formato http://xxx.xxx.xxx o ftp://xxx.xxx.xxx. |
Personalizado |
Permite especificar un tipo y formato de validación personalizado. Introduzca el patrón de formato (y sugerencia, si lo desea) en el inspector de propiedades. El mecanismo de validación del patrón solo acepta caracteres ASCII. |
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 visitante del sitio hace clic fuera del widget, mientras escribe o cuando intenta enviar el formulario.
-
Seleccione un widget de campo de texto 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 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
Esta opción solo está disponible para los tipos de validación Ninguno, Entero, Correo electrónico y URL.
-
Seleccione un widget de campo de texto de validación en la ventana de documento.
-
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 3 en el cuadro Car. mín., el widget solo hará la validación si el usuario introduce tres caracteres o más.
Especificación de los valores mínimo y máximo
Esta opción está disponible para los tipos de validación Entero, Hora, Moneda y Número real-Notación científica.
-
Seleccione un widget de campo de texto de validación en la ventana de documento.
-
En el inspector de propiedades (Ventana > Propiedades), introduzca un número en el cuadro de Valor mín. o Valor máx. Por ejemplo, si introduce el número 3 en el cuadro Valor mín., el widget solo hará la validación si el usuario introduce en el cuadro de texto el número 3 o un valor superior (4, 5, 6, etc.).
Visualización de los estados de widget en la vista de Diseño
-
Seleccione un widget de campo de texto 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.
Cambio del estado obligatorio de un campo de texto
De forma predeterminada, todos los widgets de campo 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 opcional la obligación de introducir texto en los campos por parte del usuario.
-
Seleccione un widget de campo de texto de validación en la ventana de documento.
-
En el inspector de propiedades (Ventana > Propiedades), active o desactive la opción Obligatorio, según desee.
Creación de una sugerencia para un campo de texto
La gran cantidad de tipos distintos de formatos que pueden utilizarse en los campos de texto hace que resulte útil ofrecer a los usuarios sugerencias sobre el formato que deben utilizar. Por ejemplo, un campo de texto definido con un tipo de validación Número telefónico solamente aceptará números de teléfono con el formato (000) 000-0000. Puede introducir estos números de muestra como sugerencia para que el campo de texto muestre el formato correcto cuando el usuario cargue la página en un navegador.
-
Seleccione un widget de campo de texto de validación en la ventana de documento.
-
En el inspector de propiedades (Ventana > Propiedades), introduzca una sugerencia en el cuadro de texto Sugerencia.
Bloqueo de caracteres no válidos
Puede impedir que los usuarios introduzcan caracteres no válidos en un widget de campo de texto de validación. Por ejemplo, si selecciona esta opción para un conjunto de widget con el tipo de validación Entero, no aparecerá nada en el campo si el usuario introduce una letra.
-
Seleccione un widget de campo de texto de validación en la ventana de documento.
-
En el inspector de propiedades (Ventana > Propiedades), seleccione la opción Aplicar patrón.
Personalización del widget de campo de texto de validación
Aunque el inspector de propiedades permite realizar cambios simples a un widget de campo de texto de validación, no admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un widget de campo 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_sprytextfield_custom_es.
Todas las reglas CSS de los siguientes temas se refieren a las reglas predeterminadas que se encuentran en el archivo SpryValidationTextField.css. Dreamweaver guarda el archivo SpryValidationTextField.css en la carpeta SpryAssets de su sitio cuando crea un widget de campo 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 campo 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 campo de texto de validación
De forma predeterminada, los mensajes de error del widget del campo de texto de validación aparecen en rojo con un borde de 1 píxel alrededor del texto.
-
Para modificar el estilo del texto de un widget de campo 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
.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg color: #CC3333; border: 1px solid #CC3333;
Cambio de los colores de fondo del widget de campo de texto de validación
-
Para cambiar el color de fondo de un widget de campo 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 que se va a cambiar
Regla CSS correspondiente
Propiedad que se va a modificar
Color de fondo de un widget en estado válido
.textfieldValidState input, input.textfieldValidState background-color: #B8F5B1;
Color de fondo de un widget en estado no válido
input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input background-color: #FF9F9F;
Color del fondo con widget seleccionado
.textfieldFocusState input, input.textfieldFocusState background-color: #FFFFCC;