Validación de campos de un formulario con SpryAssets

Si necesitamos validar los campos de un formulario antes de ser enviado, podemos hacer uso de los SpryAssets. Lo primero que debemos hacer es crear nuestro formulario de contacto o registro, como el siguiente:

neo 2.0 - Validación de campos de un formulario con SpryAssets - 1

A continuación aplicamos los diferentes Spry a los campos que deseamos validar:

neo 2.0 - Validación de campos de un formulario con SpryAssets - 2

Para ello, en Dreamweaver, seleccionamos los campos uno a uno y hacemos clic en "Insertar" > "Spry" y elegimos el tipo de campo a validar:

  • Campo de texto
  • Área de texto
  • Casilla de verificación
  • Selección
  • Contraseña
  • Confirmación
  • Grupo de opciones

Automáticamente, se habrá generado una llamada al script en nuestro documento antes de la etiqueta de cierre </head> como la siguiente, así como a su hoja de estilos CSS:

<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />

Y el siguiente script, al final de nuestro documento, antes de la etiqueta de cierre </body>:

<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("nombre", "none", {validateOn:["blur", "change"], minChars:1});
//-->
</script>

En función del tipo de spry que estemos empleando, podremos modificar sus propiedades en la ventana "Propiedades". Por ejemplo para un campo de texto:

  • Nombre del campo de validación
  • Tipo: podremos seleccionar entre las siguientes opciones:
    • Entero
    • Correo electrónico
    • Fecha
    • Hora
    • Tarjeta de crédito
    • Código Postal
    • Número de teléfono
    • Número de Seguridad Social
    • Moneda
    • Número real - Notación científica
    • Dirección IP
    • URL
    • Personalizado
  • Estado de la vista previa:
    • Inicial
    • Obligatorio
    • No se cumple el número de Car. mín.
    • Válido
  • Formato
  • Validar al:
    • onBlur
    • onChange
    • onSubmit
  • Patrón
  • Sugerencia
  • Car. mín.
  • Car. máx.
  • Valor mín.
  • Valor máx.
  • Obligatorio
  • Aplicar patrón

Una vez aplicados, podremos modificar los mensajes y estilos que nos servirán para indicar al usuario los campos que son obligatorios así como los mensajes de error.

Para modificar los mensajes de aviso que le aparecen al usuario al no completar un campo obligatorio o debido a un error, bastará con modificar el texto contenido entre las etiquetas <span></span> que ahora aparecerán envolviendo a cada input, por ejemplo para un campo de texto como "Nombre": <span class="textfieldRequiredMsg">Se necesita un valor.</span>

neo 2.0 - Validación de campos de un formulario con SpryAssets - 3

Puedes descargarte los archivos del ejemplo haciendo clic aquí.

6 comentarios:

  1. el span que muestra el mensaje de error siempre tiene que ir antes del campo de texto o se puede colocar en una posición diferente; y otra pregunta tengo una serie de selecciones de edades quiero saber si el mensaje de error lo puedo mostrar al inicar el primero y no antes del faltante; ej: lleno los primeron 3 select pero no seleccione nada en el cuato queiro que el mensaje me aparezca antes del primer select y no despues del 3 antes del 4.

    ResponderEliminar
    Respuestas
    1. Hola Jerson, gracias por dejar tu comentario.

      La etiqueta <span class="textfieldRequiredMsg">Se necesita un valor.</span> puedes colocarla tanto al principio como al final. En cuanto a la validación de cada uno de los campos, los mensajes o alertas de error se muestran cuando el usuario hace click en el botón enviar o cuando cambia de un campo a otro.

      Espero haber resuelto tus dudas. Saludos.

      Eliminar
  2. Buen dia

    Necesito una ayuda, tengo una pantalla y para facilitar la vista del usuario estoy trabajando con 3 pestañas,
    En la primera solo muestro informacion, en la segunda y en la tercera son forularios para que el usuario llene. Estoy trabajando con este tipo de campos para las validaciones pero se me esta presentando un problema y es que cada formulario que esta en la pestaña son cosas distintas, y en ambos tengo campos de este tipo y cuando hago clic en el primer formulario para guardar los datos me valida tambien los campos que estan en la otra pestaña. Como hago para que cuando yo haga clic en el boton solo me valide los campos que estan en esa pestaña. Agradecido por la ayuda que me puedas prestar

    ResponderEliminar
    Respuestas
    1. Hola LMHL;

      Si tienes varios formularios, cada uno de ellos con su correspondiente botón de envío en una misma pantalla (en tu caso a través de pestañas), y en cada uno de ellos existe un mismo campo, por ejemplo 'Nombre', debes asegurarte de identificarlos con un nombre (ID) único; por ejemplo para el campo nombre del formulario de la primera pestaña id=nombre_fomr1 y para el segundo id=nombre_form2.

      Espero haberte ayudado. Saludos.

      Eliminar
  3. oye mira tengo una duda, crees que se pueda validar el formulario mandando a llamar solo a un campo de texto... poniendole a todos la misma etiqueta span id="sprytextfield" y cuando hace la validacion abajo poner solo una variable.... var sprytextfield = new Spry.Widget.ValidationTextField("sprytextfield");.... espero que mehaya explicado bien jejeje... ya lo intente pero solo valida un campo, crees que se pueda hacer de alguna forma para ahorrar espacio mas que nada..

    ResponderEliminar
    Respuestas
    1. Hola; siento decirte que no es posible hacer lo que tú quieres, como bien apuntas sólo te validará el primer campo. De todas formas, ¿por qué quieres ahorrar unas líneas de código?

      Saludos.

      Eliminar

Entradas populares

Sobre el autor

Mi foto

Me llamo Juan Ignacio Estévez. Soy técnico publicitario por el Centro Español de Nuevas Profesiones (CENP).

Comencé desarrollando mi carrera profesional en estudios de diseño y agencias de publicidad como director de arte, siempre enfocado al mundo Offline. Sin embargo, pronto sentí curiosidad por el Online. Desde entonces, he intentado formarme en este sector, a través de diferentes cursos de formación y de forma autodidacta.

Puedes ver mi perfil completo en LinkedIn. ¿Hacemos Networking?