Validación de formularios con JavaScript

Con este articulo pretendo ayudar a los que están dando sus primeros pasos en la programación web, y desean conocer algunas de las herramientas mas populares para la validación de formularios en paginas HTML.

Lo usual al desarrollar un sitio web, es realizar la validación de los datos recogidos en un formulario en la parte cliente.
Esto, al menos, en una primera instancia. Y se suele utilizar para validar el formato del texto ingresado, por ejemplo, el correo electrónico, también para asegurarnos que campos obligatorios se hayan rellenado correctamente..
Antes de comenzar con las explicaciones referentes a la validación de los formularios en JavaScript, voy a hacer un repaso sobre los diferentes elementos que pueden formar parte de un formulario en una web.
---
Campo de texto ( TextBox )
Muestra una celda para el ingreso de texto.
Etiqueta:

<input name="identificador" type="text" />

Uso:

Nombre: <input name="identificador" type="text" value="Ingrese su nombre..." />

---
Casilla de verificación ( CheckBox )
Permite seleccionar varias opciones al mismo tiempo de un grupo de opciones.
Etiqueta:

<input name="identificador" type="checkbox" value="valor"  />

Uso:

Intereses: <input name="identificador" type="checkbox" value="valor1"  /> Cine       
                       <input name="identificador" type="checkbox" value="valor2"  /> Teatro

---
Botones de selección simple ( RadioButton )
Permite seleccionar una y solo una opción de un grupo de opciones.
Etiqueta:

<input name="identificador" type="radio" value="valor" />

Uso:

Sexo: <input name="identificador" type="radio" value="m" /> Masculino         
                 <input name="identificador" type="radio" value="f" /> Femenino

---
Lista desplegable ( ComboBox )
Muestra una lista desplegable de la cual se puede seleccionar una o mas opciones.
Etiqueta:

<select name="identificador">      
    <option value="valor1"> Texto2 </option>       
    <option value="valor2"> Texto1 </option>       
</select>

Uso:

   
Provincia:        
<select name="identificador">         
    <option value="SF"> Santa Fe </option>         
    <option value="CO"> Cordoba </option>         
</select>

---
hay otros tipos de elementos que no se mencionan por una simple razón, son elementos similares, por ejemplo, el campo de contraseña y el de texto.
Se tratan igual. Tampoco se mencionan los campos que no requieren validación, como los del tipo botón.

Vistos los elementos principales de un formulario, veamos como manejamos sus objetos y métodos.
---
TextBox

Objetos: document.formulario.campo
Métodos y propiedades: value (clase String que contiene el valor introducido)
Ejemplo: alert( document.datos.apellido.value )


<form name="datos">      
  Apellido: <input name="apellido" type="text" />       
  <br/>       
  <input type="button" value="Mostrar" onclick="javascript:alert(document.datos.apellido.value);"       
</form>

---
CheckBox
Objetos: document.formulario.campo
Métodos y propiedades: cheked (tipo boolean que indica si esta seleccionado)
Ejemplo: if( document.datos.cine.checked ) alert( “Te gusta el cine” )

<form name="datos">    
Intereses:     
  <p>     
    <label>     
      <input type="checkbox" name="cine" value="checkbox" />     
      Cine</label>     
    <br />     
    <label>     
      <input type="checkbox" name="teatro" value="checkbox" />     
      Teatro</label>     
    <br />     
  </p>     
  <br/>     
<input type="button" value="Mostrar" onclick='javascript:if(document.datos.cine.checked) alert("Te gusta el cine");'     
</form>

---
RadioButtons
Objetos: document.formulario.campo[indice_del_elemento]
Métodos y propiedades: checked (tipo boolean que indica si esta seleccionado)
Ejemplo: if( document.datos.interes[0].checked ) alert( “Te gusta el cine” )

<form name="datos">    
Intereses:     
  <p>     
    <label>     
      <input type="radio" name="interes" value="radio" id="interes_0" />     
      Cine</label>     
    <br />     
    <label>     
      <input type="radio" name="interes" value="radio" id="interes_1" />     
      Teatro</label>     
    <br />     
  </p>     
  <br/>     
<input type="button" value="Mostrar" onclick='javascript:if(document.datos.interes[0].checked) alert("Te gusta el cine");'     
</form>

---
ComboBox
Objetos: document.formulario.campo
Métodos y propiedades:
- selectedIndex (numero de la opción seleccionada)
- options (Clase array de la matriz de opciones de la lista)
- options[indice].value (clase string que retorna el valor seleccionado)
- options[indice].text (clase string que retorna el texto seleccionado)
Ejemplo: alert( document.dato.pr.options[document.dato.pr.selectedIndex].value);

<form name="datos">    
Provincias:     
<select name="pr">     
  <option value="01">Santa Fe     
  <option value="02">Cordoba     
  <option value="03">Buenos Aires     
</select>     
  <br/>     
<input type="button" value="Mostrar" onclick='javascript:alert(document.datos.pr.options[document.datos.pr.selectedIndex].value + " - " + document.datos.pr.options[document.datos.pr.selectedIndex].text);'>     
</form>

En las especificaciones de los objetos, “.formulario.” hace referencia al nombre (name) del formulario en la etiqueta <form> y “campo” se refiere al nombre (name) del campo de la etiqueta correspondiente al objeto en cuestión.

Ahora veremos un ejemplo completo de como validar un formulario simple.


Ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     
<html xmlns="http://www.w3.org/1999/xhtml">     
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
<title>Ejemplo de validacion con JavaScript</title>
<script language="javascript">    
function mostrar()     
{     
var persona = "";     
  
if(document.datos.apellido.value == "")     
{     
   alert("El campo apellido no puede quedar vacio...");     
   document.datos.apellido.focus();     
} else {     
if(document.datos.sexo[0].checked) {     
  persona = "Al señor "; }     
if(document.datos.sexo[1].checked) {     
  persona = "A la señora "; }     
   
persona = persona + document.datos.nombre.value + " " + document.datos.apellido.value + " le gusta ";
if(document.datos.cine.checked) {    
  persona = persona + " el cine, "; }     
if(document.datos.teatro.checked) {     
  persona = persona + " el teatro, "; }     
if(document.datos.leer.checked) {     
  persona = persona + " leer, "; }     
    
persona = persona + " - Su idioma nativo es " + document.datos.idioma.options[document.datos.idioma.selectedIndex].text;
alert ( persona );    
}  
return 0;     
  
}     
</script>
</head>
<body>    
<form name="datos">     
<p>Nombre: <input name="nombre" type="text" /></p>     
<p>Apellido: <input name="apellido" type="text" /> * </p>     
<p>Sexo: <input name="sexo" type="radio" value="Masculino" checked /> Masculino <input name="sexo" type="radio" value="femenino" /> Femenino</p>     
<p> Preferencias:<br/>     
  <label>     
    <input type="checkbox" name="cine" />     
    Cine</label>     
  <br />     
  <label>     
    <input type="checkbox" name="teatro" />     
    Teatro</label>     
  <br />     
  <label>     
    <input type="checkbox" name="leer" />     
    Leer</label>     
  <br />     
</p>     
<p>Seleccione su Idioma:     
<select name="idioma">     
  <option value="es"> Español     
  <option value="in"> Ingles     
</select>     
</p>     
<br/>     
<input type="button" value="Mostrar" onclick='javascript:mostrar();'>     
<p>------<br/>     
Los campos marcados con * son obligatorios y no se pueden dejar vacios.</p>     
</form>     
</body>     
</html>