Validar campos de un formulario con Javascript

¿Cómo hacerlo?

Ejemplo 1

Validar que los campos del formulario (unicamente los campos obligatorios) no se encuentren vacíos antes de enviarlo, de lo contrario el formulario no se enviará. Para este ejemplo he realizado la maquetación usando una tabla.

Deseo ver de que se trata (explicación del ejemplo)

  • Para presentar el formulario se ha usado una tabla.
  • El formulario cuenta con campos que son obligatorios (precedidos por un astericos)
  • Mientras los campos obligatorios no se ingresen, el formulario no será enviado.
  • Si se trata de enviar el formulario, los campos obligatorios serán marcados con un fondo rosado y un borde rojo, mas una legenda que indica que el campo es obligatorio.
1
2
3
4
5
6
7
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery.validator.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#register-form').jValidator();
  });
</script>

Ejemplo 2

Validar que los campos del formulario (unicamente los campos obligatorios) no se encuentren vacíos antes de enviarlo, de lo contrario el formulario no se enviará. Para este ejemplo he realizado la maquetación usando párrafos.

Deseo ver de que se trata (explicación del ejemplo)

  • Para presentar el formulario se ha usado parrafos.
  • El formulario cuenta con campos que son obligatorios (precedidos por un astericos)
  • Mientras los campos obligatorios no se ingresen, el formulario no será enviado.
  • Si se trata de enviar el formulario, los campos obligatorios serán marcados con un fondo rosado y un borde rojo, mas una legenda que indica que el campo es obligatorio.
1
2
3
4
5
6
7
8
9
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery.validator.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#login-form').jValidator({
      tag: 'p'
    });
  });
</script>

Explicación

Deseo saber cómo funciona

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link rel="stylesheet" href="ruta/al/archivo/jquery.validator.css" type="text/css" />
<script type="text/javascript" src="ruta/al/archivo/jquery"></script>
<script type="text/javascript" src="ruta/al/archivo/jquery.validator.js"></script>
<script type="text/javascript">
  // Es importantísimo que una vez hayamos incluido la librería de jQuery, incluyamos el
  // archivo jquery.validator.js, no antes. Asimismo, debemos de asegurarnos de incluir el
  // archivo que contiene los estilos de error (jquery.validator.css); los estilos aquí definidos
  // pueden ser modificados a antojo.
  $(document).ready(function(){
    // Seleccionamos el formulario (en este caso por su 'id') y le asociamos el validador.
    // Por defecto, se asume que se esta usando una tabla a fin de mostrar el formulario.
    // Para mayor información acerca de los parámetros que puede recibir y sus respectivos
    // valores por defectos, se ha dispuesto de una tabla con la información de estos valores.
    $('#register-form').jValidator();
  });
</script>
Parámetro Valor por defecto Descripción
wrapper ‘jValidator’ La clase del div que contiene los elementos del formulario. Esta contenido dentro la etiqueta <form>.
tag ‘tr’ Acepta como posibles valores: ‘tr’ o ‘p’. Indica si elemento del formulario se encuentra dentro de un <p> o un <tr>.
error ‘Campo obligatorio’ La leyenda a desplegará en caso el campo se encuentre vacío

Para mayor información y saber cual es la estructura a respetar (estructura que se espera), descargar cualquiera de los ejemplos que se han colocado al inicio de este post.

¿Necesitas otro ejemplo?

Si necesitas otro ejemplo (uno más real), puedes dejar un comentario indicando tu solicitud, acerca de lo que quisieras que elaboraramos, y con gusto contestaremos tu solicitud.

Próximo tema

Tabs (pestañas) con jQuery