Seleccione Insertar > Spry > Confirmación 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 confirmación de validación
El widget de confirmación de validación es un campo de texto o un campo de formulario de contraseña que muestra los estados válido o no válido cuando un usuario introduce un valor que no coincide con el valor de un campo similar del mismo formulario. Por ejemplo, puede añadir un widget de confirmación de validación a un formulario que exija al usuario volver a introducir la contraseña especificada en un campo anterior. Si el usuario no escribe la contraseña exactamente como la especificó anteriormente, el widget devolverá un mensaje de error para indicar que los valores no coinciden.
Puede utilizar un widget de confirmación de validación junto con un widget de campo de texto de validación para validar direcciones de correo electrónico.
Nota:
Deberá estar familiarizado con los widgets de validación de Spry para trabajar con el widget de confirmación. Si no está familiarizado con ellos, consulte Trabajo con el widget de campo de texto de validación de Spry o cualquiera de las otras descripciones de widgets de validación antes de continuar. En esta descripción no se exponen todos los conceptos básicos de los widgets de validación.
Las siguientes ilustraciones muestran la configuración típica de un widget de confirmación:
A. Un campo de contraseña o un widget de validación de contraseña de Spry B. Widget de confirmación
El widget de confirmación de validación incluye varios estados (por ejemplo, válido, no válido, obligatorio, etc.). Puede modificar las propiedades de estos estados editando el correspondiente archivo CSS (SpryValidationConfirm.css), en función de los resultados de validación deseados. Un widget de confirmación de validación puede hacer validaciones en varios puntos; por ejemplo, cuando el visitante del sitio hace clic fuera del widget, cuando escribe o cuando intenta enviar el formulario.
Estado inicial
Cuando la página se carga en el navegador o cuando el usuario reinicia el formulario.
Estado de foco
Cuando el usuario sitúa el punto de inserción en el widget.
Estado válido
Cuando el usuario introduce información correctamente y se puede enviar el formulario.
Estado no válido
Cuando el usuario introduce texto que no coincide con el texto introducido en un campo de texto anterior, un widget de campo de texto de validación o un widget de contraseña de validación.
Estado obligatorio
Cuando el usuario no ha introducido texto obligatorio en el campo de texto.
Para obtener una descripción completa del funcionamiento de los widgets de confirmación de validación, así como información adicional sobre la estructura del widget, consulte www.adobe.com/go/learn_dw_spryconfirm_es.
Inserción y edición del widget de confirmación de validación
Inserción del widget de confirmación 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 confirmación de validación a través de la categoría Spry del panel Insertar.
Cambio del estado obligatorio de un widget de confirmación de validación
De forma predeterminada, todos los widgets de confirmación 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 de confirmación en los campos por parte del usuario.
-
Seleccione un widget de confirmación de validación en la ventana de documento haciendo clic en su ficha azul.
-
En el inspector de propiedades (Ventana > Propiedades), active o desactive la opción Obligatorio, según desee.
Especificación del campo de texto con respecto al cual debe realizarse la validación
-
Seleccione un widget de confirmación de validación en la ventana de documento haciendo clic en su ficha azul.
-
En el inspector de propiedades (Ventana > Propiedades), seleccione el campo de texto con respecto al cual desea realizar la validación seleccionando un campo de texto del menú emergente Validar con. Todos los campos de texto que tengan asignado un ID exclusivo aparecerán como opciones en el menú emergente.
Visualización de los estados de widget en la vista de Diseño
-
Seleccione un widget de confirmación de validación en la ventana de documento haciendo clic en su ficha azul.
-
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.
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 confirmación de validación en la ventana de documento haciendo clic en su ficha azul.
-
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 de confirmación.
Cambiar
Realiza la validación cuando el usuario cambia el texto situado dentro del campo de texto de confirmación.
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.
Personalización del widget de confirmación
Aunque el inspector de propiedades permite realizar cambios simples a un widget de confirmación de validación, no admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un widget de confirmació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_spryconfirm_custom_es.
Todas las reglas CSS de los siguientes temas se refieren a las reglas predeterminadas que se encuentran en el archivo SpryValidationConfirm.css. Dreamweaver guarda el archivo SpryValidationConfirm.css en la carpeta SpryAssets de su sitio cuando crea un widget de confirmació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 confirmació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 a un widget de confirmación de validación (instrucciones generales)
-
Abra el archivo SpryValidationConfirm.css.
-
Localice la regla CSS correspondiente a la parte del widget que desea cambiar. Por ejemplo, para cambiar el color de fondo del estado obligatorio del widget de confirmación, edite la regla input.confirmRequiredState en el archivo SpryValidationConfirm.css.
-
Realice los cambios deseados en el código CSS y guarde el archivo.
El archivo SpryValidationConfirm.css contiene comentarios completos que explican el código y el objetivo de determinadas reglas. Para más información, consulte los comentarios en el archivo.
Aplicación de estilo al texto del mensaje de error del widget de confirmación de validación
De forma predeterminada, los mensajes de error del widget de confirmación de validación aparecen en rojo con un borde sólido de 1 píxel alrededor del texto.
-
Para modificar el estilo del texto de los mensajes de error de un widget de confirmación 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
.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg color: #CC3333; border: 1px solid #CC3333;
Cambio de los colores de fondo del widget de confirmación de validación
-
Para cambiar el color de fondo de un widget de confirmació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 que se va a cambiar
Regla CSS correspondiente
Propiedad que se va a modificar
Color de fondo de un widget en estado válido
.confirmValidState input, input.confirmValidState background-color: #B8F5B1;
Color de fondo de un widget en estado no válido
input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input background-color: #FF9F9F;
Color del fondo con widget seleccionado
.confirmFocusState input, input.confirmFocusState background-color: #FFFFCC;
