Validar formulario con javascript

Vamos realizar un ejemplo de un formulario completo para validar. Las validaciones se hacen en el propio navegador antes de enviarlo. Si hubo algún campo no relleno o con información errónea, el formulario muestra el campo que está incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario son correctos se envía el formulario.

Hemos querido hacer un formulario sencillo, para que el ejercicio no se haga demasiado complicado. No obstante, se realizan validaciones en campos con distintos valores, para hacerlo más variado. Se comprueba un campo donde debe figurar un texto, otro donde debe introducirse un número mayor que 18 y un último con un campo select donde deben haber seleccionado un valor.

Lo primero que debemos considerar para que todo funcione como esperamos es declarar los tags del formulario y del botón submit como mostramos a continuación:

<form name="fvalida" method="POST">
  ...
<input type="button" value="Enviar" onclick="validarform()">

Nos debemos fijar expresamente en el tag <form> que no lleva action=»», los datos se envían mediante el método POST y tiene un name=»fvalida».

Tendremos un botón type=»button» que al hacer click en él, ejecutaremos la función validarform(). En medio de estos tags tendremos todos los inputs del formulario.

La función javascript validarform() es la que se encarga de mostrarnos los mensajes de error si en los campos del formulario no se ha introducido una cadena de texto esperada.

<script type="text/javascript">
function validarEntero(valor){
   //intento convertir a entero.
   //si era un entero no le afecta, si no lo era lo intenta convertir
   valor = parseInt(valor)

   //Compruebo si es un valor numérico
   if (isNaN(valor)) {
      //entonces (no es numero) devuelvo el valor cadena vacia
      return ""
   }else{
      //En caso contrario (Si era un número) devuelvo el valor
      return valor
   }
}

function validarform(){
   //valido el nombre
   if (document.fvalida.nombre.value.length==0){
      alert("Tiene que escribir su nombre")
      document.fvalida.nombre.focus()
      return 0;
   }

   //valido la edad. tiene que ser entero mayor que 18
   edad = document.fvalida.edad.value
   edad = validarEntero(edad)
   document.fvalida.edad.value=edad
   if (edad==""){
      alert("Tiene que introducir un número entero en su edad.")
      document.fvalida.edad.focus()
      return 0;
   }else{
      if (edad<18){
         alert("Debe ser mayor de 18 años.")
         document.fvalida.edad.focus()
         return 0;
      }
   }

   //valido el interés
   if (document.fvalida.interes.selectedIndex==0){
      alert("Debe seleccionar un motivo de su contacto.")
      document.fvalida.interes.focus()
      return 0;
    }

    //el formulario se envia
    alert("Muchas gracias por enviar el formulario");
    document.fvalida.submit();
}
</script>

Ver el ejemplo en funcionamiento