Librería JavaScript para validar formularios HTML sin programar

Aquí está el formulario de ejemplo. Rellena el formulario y mira cómo es la validación en cada campo ¡NO ES PRECISO PROGRAMAR EN JAVASCRIPT!
Las validaciones realizadas son:

Primer nombre: (requerido)
Último nombre: (requerido)
Edad : (requerido)(18-130)
Fecha de la última asistencia (MM/DD/AAAA) : Tiempo solicitado (hora en formato militar):
Teléfono 999-999-9999: Código Postal: Estado:
Código mágico (####AA) :
Correo electrónico:
NSS :
¿Atendido? (requerido)
Mensaje: (no requerido, 20-200 caracteres)



Direcciones:

  1. Descargar editcheck.js (clic derecho y elegir Guardar enlace como...)
  2. Al comienzo del archivo HTML incluir esta línea:
    <script type="text/javascript" src="editcheck.js"></script>
  3. En la etiqueta <FORM> añadir este atributo de evento:
    onsubmit="return valforms(this)"
    Esto hará que el formulario sea validado cuando se presiona el botón Enviar.

    También puedes validar cada campo de forma inmediata agregando:
    onchange="return valforms(this.form,this)" a tus etiquetas <INPUT>.

  4. En cada etiqueta <input>, <select>, ó <textarea> , agrega un atributo editcheck que describa qué es lo que se debe hacer en ese campo.
    Ejemplo:
    Nombre: <input name=fullname type=text size=20 maxlength=20 editcheck="req=Y=Por favor introduce tu nombre.;cvt=UT">
    Fecha de nacimiento: <input name=birthdt  type=text size=10 maxlength=10 editcheck="req=Y=Por favor introduce tu fecha de nacimiento.;type=date">
    Código postal: <input name=zip type=text size=11 maxlength=10 
      editcheck="req=Y=Se requiere un código postal.;type=zip=Por favor introduce un código postal válido en Estados Unidos.;cvt=~">
    

Dispones también de múltiples opciones; para agregar cada una, separalas con un punto y coma (Por ejemplo: editcheck="cvt=TU;type=alpha"). Cada opción tiene este formato:

NOMBRE=VALOR=MENSAJE DE ERROR

El mensaje de error es opcional. Estas son las opciones de atributos editcheck:

Nombre/Valor Descripción
req=Y Campo obligatorio: debe ser introducido un valor.
type=datatype Los tipos de datos pueden ser:
  • INT -Campo entero: todos los dígitos.
  • NUM -Campo numérico: todos los dígitos con posiciones decimales.
  • ALPHA -Campo alfabético: todas las letras y están permitidos los espacios en blanco.
  • ALPHANUM -Campo alfanumérico: todas las letras, todos los números y están permitidos los espacios en blanco.
  • DATE -Fecha en formato MM/DD/AAAA or MM/DD/AA
  • PHONE -Número de teléfono 999-999-9999 ó (999) 999-9999
  • EMAIL -Un correo electrónico válido: por ejemplo: bob@mycompany.com.
  • ZIP -Un código postal válido en los Estados Unidos, de 5 o 9 dígitos. El guión es opcional. Por ejemplo: 32317.
  • SSN -Un número de la seguridad social válido en los Estados Unidos, de 9 dígitos. El guión es opcional. Por ejemplo: 111-22-3333.
  • STATE -Una abreviatura estatal válida de un estado de los Estados Unidos. Por ejemplo: FL - Florida; CA- California
  • Tipos personalizados: Si no se especifica uno de los tipos anteriores, entonces podrá especificar un tipo de campo personalizado basado en una expresión regular. Lo que quiere decir que se estará limitando la entrada del campo a un patrón de expresión regular específico. Esta es una poderosa característica que ofrece un sinfín de opciones de validación. Por ejemplo, si deseas limitar la entrada a números de dos dígitos: type=^\d{2}$.
minval=999 Para campos numéricos, el mínimo valor permitido.
maxval=999 Para campos numéricos, el máximo valor permitido.
minlen=999 La cantidad mínima de caracteres de un campo, si es que este ha sido rellenado.
maxlen=999 La cantidad máxima de caracteres de un campo, si es que este ha sido rellenado.
eval=javascript validation string Validación mediante una expresión en javascript: Deberás escribir una expresión en javascript válida. Si la expresión es falsa, entonces se mostrará un mensaje de error. Echa una mirada al código de "Fecha de la última asistencia" más arriba, para ver un ejemplo de cómo se previene la entrada de fechas futuras.
cvt=cmdstring Función Covertir: cmdstring es cualquier combinación de las siguientes letras:
  • U: Convertir el valor introducido a mayúsculas.
  • L: Convertir el valor introducido a minúsculas.
  • ]: Recorta los espacios finales del valor introducido. NOTA: Si las funciones de ajuste se encuentran después del comando REQ=Y, la validación de campo obligatorio ignorará espacios en blanco, pero el recorte se producirá luego de la validación de campo obligatorio.If your trim functions are after the REQ=Y command, the REQuired check will ignore spaces, but trimming will occur after the REQuired check.
  • [: Recortar espacios al inicio del valor introducido.
  • T: Recortar espacios, iniciales y/o finales del valor introducido.
  • C: Estrujar espacios: dos o más espacios se convierten en un sólo espacio..
  • ~: Remover puntuación..