Cómo validar un campo de texto con un formulario widget spry de Dreamweaver

Escrito por ehow contributor | Traducido por enrique pereira vivas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo validar un campo de texto con un formulario widget spry de Dreamweaver
Valida un campo de texto con un formulario ágil widget de Dreamweaver. (Chad Baker/Ryan McVay/Photodisc/Getty Images)

Dreamweaver CS3 viene con algunos widgets de validación Spry para los formularios. En este artículo aprenderás a validar un campo de texto y personalizar los mensajes de error Spry.

Otras personas están leyendo

Necesitarás

  • El software de Dreamweaver CS3 (o superior).

Lista completaMinimizar

Instrucciones

  1. 1

    Si ya dispones de un campo de texto en tu página, selecciona y haz clic en el botón de Spry para los campos de texto. Si todavía no tienes un campo de texto, haz clic en el botón de Spry para campos de texto y será insertado uno.

  2. 2

    El cuadro de diálogo de accesibilidad se abrirá. Completa la información aquí para el ID del elemento y la etiqueta del formulario. Haz clic en Aceptar. Si todavía no has añadido un elemento del formulario a tu página, Dreamweaver te ofrecerá hacerlo por ti.

  3. 3

    Dreamweaver te avisará de aquellos archivos dependientes que se añadirán a tu sitio para hacer que funcione el widget Spry. Haz clic en Aceptar.

  4. 4

    Puedes cambiar el nombre del formulario "widget" con 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 envuelto alrededor del elemento del formulario. Probablemente deberías dejar "spry" en el nombre, si decides cambiarlo. De esta forma no entrará en conflicto con el ID y la etiqueta que hayas elegido. El ejemplo de la foto es para un nombre del campo de texto, así que cambié el nombre del widget a spry_fname. Ten en cuenta que la casilla de verificación requerida se selecciona automáticamente en el inspector de propiedades. El gráfico es una imagen combinada que muestra lo que Dreamweaver tiene en la vista Código y en la vista de diseño en este punto.

  5. 5

    Cuando el estado de Preview "requerido" está seleccionado 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 puede ser personalizado al escribir un nuevo mensaje en la ventana del documento. También debes verificar el inspector de propiedades del menú estado de Preview, ya que para algunos widgets (no éste) la comprobación del estado de Preview es un buen hábito para el formulario dado que el mensaje de error puede variar dependiendo de las circunstancias. En la foto del ejemplo el mensaje de error es lo que verías si el formulario se envía con el campo de nombre vacío. Si no deseas ver el mensaje de error en la vista de Diseño, entonces selecciona el estado Preview "inicial".

  6. 6

    Decidir cuándo validar se realiza mediante el inspector de propiedades. Para que un campo de texto obligatorio pida 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 seleccionaste la dirección de correo electrónico en el menú Tipo, puede que prefieras que se valide onBlur. Si el campo de texto no contenía una dirección de correo electrónico un mensaje de error como "Por favor, introduzca una dirección válida de correo electrónico" se abrirá al minuto que el usuario se haya trasladado al campo siguiente del formulario. Validar el cambio sería un poco irritante para los usuarios en un campo de texto, ya que cada golpe de teclado es un cambio, por lo que un mensaje de error podría aparecer en el momento que alguien comience a escribir en el campo de texto.

  7. 7

    Puedes establecer límites sobre el número de caracteres permitidos en el campo de texto con el inspector de propiedades. También puedes insertar una "pista" que aparecerá en el campo de texto antes de que la persona comience a escribir. En el ejemplo del nombre en el primer campo, una pista como "Escriba su nombre" podría ser utilizada, sin embargo, con el uso adecuado de la etiqueta del elemento que estableces en el diálogo de Accesibilidad en el mismo comienzo, una pista no es necesaria.

  8. 8

    Utiliza el inspector de propiedades para decidir sobre el tipo de validación. Para el ejemplo aquí mostrado, preguntando por el nombre, hacer que el campo sea obligatorio y establecer el tipo en ninguno sería adecuado. Sin embargo, hay 14 tipos de validaciones posibles con los campos de texto. Ninguno es el valor predeterminado. Comprobaciones enteras para un número entero. El e-mail busca una dirección de correo electrónico con formato correcto como me@mysite.com. La fecha se puede escribir de diversas maneras, así como el tiempo. Utiliza el inspector de propiedades del menú Formato para definir el formato de la fecha u hora. La tarjeta de crédito busca un tipo de tarjeta y un formato para introducir la fecha (establece esto con las opciones de formato). El Código Postal se puede ajustar para buscar, ya sea 5 o 9 dígitos. El número de teléfono sólo puede validar números telefónicos estadounidenses o canadienses. El número de Seguro Social busca tres números, un guión, dos números dos, un guión y tres números. El tipo de moneda puede validar para el formato americano o europeo. El número real permite números decimales. La dirección IP busca un número con formato como un número IP. El URI se puede configurar para incluir el protocolo, como http://. Por último, puedes personalizar una prueba de validación de diversas maneras para buscar patrones o varias combinaciones de números o mayúsculas y minúsculas.

  9. 9

    El estilo por defecto del mensaje de error es de color rojo con un contorno rojo. Puedes cambiar eso. En el panel Estilos CSS busca el selector de estilo que comienza con .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState y que sigue con una lista separada por comas de los selectores. Puedes editar esto de la forma habitual en la ventana de edición de diálogos CSS Style de Dreamweaver.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles