Tecnología

Inicio

Cómo validar un campo de texto con Dreamweaver Forma widgets de Spry

Dreamweaver CS3 viene con algunos widgets de validación de Spry para las formas. En este artículo usted aprenderá cómo validar un campo de texto y personalizar los mensajes de error de Spry.

Instrucciones

1 Cómo validar un campo de texto con Dreamweaver Forma widgets de Spry

Si ya dispone de un campo de texto formulario en su página, seleccionarlo y luego haga clic en el botón de Spry para los campos de texto. Si aún no dispone de un campo de texto, haga clic en el botón de Spry para los campos de texto y uno se insertará.

2 Cómo validar un campo de texto con Dreamweaver Forma widgets de Spry


El diálogo Accesibilidad abrirá. Llene la información aquí por el ID de elemento de formulario y etiqueta. Haga clic en Aceptar. Si usted todavía no ha añadido un elemento de formulario a su página, Dreamweaver ofrece de hacer eso por usted.

3 Cómo validar un campo de texto con Dreamweaver Forma widgets de Spry


Dreamweaver le avisa de los archivos dependientes, que se añadirá a su sitio para hacer que el widget de Spry. Haga clic en Aceptar.

4 Cómo validar un campo de texto con Dreamweaver Forma widgets de Spry


Puede cambiar el nombre de la forma "Widget" El Inspector de propiedades en lugar de utilizar el nombre genérico como sprytextfield1. Dreamweaver añade el nombre del widget con un elemento span envuelta alrededor del elemento de formulario. Probablemente debería dejar "ágil" en el nombre si decide cambiarlo. De esa manera no va a entrar en conflicto con el ID y le etiqueta elegido. El ejemplo ilustrado es para un primer campo de nombre de texto, por lo que cambió el nombre del widget para spry_fname. Observe que el cuadro de selección deseado se selecciona automáticamente en el inspector de propiedades. La gráfica es una imagen combinada que muestra lo que Dreamweaver tiene en la vista de código y diseño Ver en este punto.

5

Cuando se selecciona Vista preliminar de la "necesaria" en el inspector de propiedades, el mensaje de error se muestra en la vista Diseño. El usuario no vería esto en el navegador a menos que hubiera un error en la validación del campo. Esto se puede personalizar escribiendo un nuevo mensaje en la ventana del documento. También debe comprobar el menú de estado de vista previa inspector de propiedades, ya que para algunos widgets (no éste) la comprobación del estado de vista previa es un buen hábito para formar puesto que el mensaje de error puede cambiar dependiendo de las circunstancias. En el ejemplo representado el mensaje de error es lo que se vería si el formulario se presentaron con el primer campo de nombre vacío. Si no desea ver el mensaje de error en la vista Diseño y, a continuación, seleccione el estado de vista previa "inicial".

6 Cómo validar un campo de texto con Dreamweaver Forma widgets de Spry


La decisión de cuándo validar se realiza mediante el inspector de propiedades. Para un campo de texto necesario pedir un nombre, la mejor opción es la validación en Enviar. Sin embargo, hay una serie de opciones en el menú Tipo del inspector de propiedades. Si ha seleccionado Dirección de correo electrónico en el menú Tipo, es posible que prefiera tener que validar onBlur. Si el campo de texto no contiene una dirección de correo electrónico un mensaje de error como "Por favor, introduzca una dirección válida de correo electrónico" podría aparecer en el momento en que el usuario se trasladó al siguiente campo de formulario. Validar el cambio sería un poco irritante para los usuarios de un campo de texto, ya que cada golpe de teclado es un cambio, por lo que un mensaje de error aparecería el momento en que alguien comenzó a escribir en el campo de texto.

7 Puede establecer límites sobre el número de caracteres permitidos en el campo de texto con el inspector de propiedades. También puede insertar un "Pista" que aparecerá en el campo de texto antes de que la persona comienza a escribir. En el primer ejemplo campo de nombre de una pista como "Escriba su nombre de pila" podría ser utilizado, sin embargo, con el uso adecuado del elemento de etiqueta que se configura en el diálogo de Accesibilidad en el comienzo mismo, una pista no es necesario. 8 Cómo validar un campo de texto con Dreamweaver Forma widgets de Spry


Utilice el inspector de propiedades para decidir sobre el tipo de validación. Para el ejemplo aquí, preguntando por el nombre, haciendo que el campo necesario y establecer el Tipo en Ninguno sería adecuado. Sin embargo, hay 14 tipos de validaciones de campos de texto. Ninguno es el valor predeterminado. cheques enteros de un número entero. Correo electrónico busca una dirección de correo correctamente formateada como [email protected]. La fecha se puede formatear en diferentes formas, como se puede medir el tiempo. Utilice el menú Formato inspector de propiedades para establecer el formato de fecha u hora. Tarjeta de crédito busca un tipo de tarjeta y un formato para introducir la fecha (establecer esto con las opciones de formato). Código postal se puede configurar para buscar 5 o 9 dígitos. número de teléfono sólo puede validar números de Estados Unidos o Canadá. Número de Seguridad Social se ve por tres números, un guión, dos números, un guión y tres números. La moneda puede validar para el formato americano o europeo. número real permite a los números decimales. dirección IP busca un número formateado como un número IP. URI se puede configurar para incluir el protocolo, tales como http: //. Por último, se puede personalizar una prueba de validación en varias formas de buscar patrones o varias combinaciones de números o letras mayúsculas y minúsculas.

9 Cómo validar un campo de texto con Dreamweaver Forma widgets de Spry


El estilo predeterminado del mensaje de error es de color rojo con un contorno rojo. Puede cambiar eso. En el aspecto del panel Estilos CSS para el selector de estilo que comienza .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState y sigue en marcha con una lista separada por comas de los selectores. Puede editar esta en la forma habitual en la ventana de diálogo de edición de estilos CSS de Dreamweaver.

Consejos y advertencias

  • Dado que los mensajes de error se insertan con una etiqueta span, aparece el de errores en línea inmediatamente después de que el elemento de formulario cuando sea necesario. Si desea que el mensaje de error en su propia línea puede cambiar el lapso de AP o div - sólo asegúrese de mantener el nombre de la clase intacta.