Cómo validar los campos de un formulario antes de enviarlo utilizando los SpryAssets de Dreamweaver.

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í.