Validación de campos de un formulario con JavaScript

A través del siguiente Script vamos a validar los campos de un formulario, indicando los posibles errores al usuario mediante alertas.

En la mayoría de formularios podemos encontrar los siguientes tipos de campos:

  • Texto (Nombre, Apellidos, Dirección, Comentarios)
  • Numérico (Teléfono, Código Postal, Edad)
  • Email
  • Lista/Menú (Provincia, Sexo)
  • Checkbox (Condiciones Generales, Aviso Legal)

Colocamos el Script antes de la etiqueta </head>

//Abrimos el Script
<script type="text/javascript">

//Nombramos la función
function valida_envia(){

//Definimos los caracteres permitidos en una dirección de correo electrónico
var regexp = /^[0-9a-zA-Z._.-]+\@[0-9a-zA-Z._.-]+\.[0-9a-zA-Z]+$/;

//Validamos un campo o área de texto, por ejemplo el campo nombre
if (document.form.nombre.value.length==0){
alert("Tiene que escribir su nombre");
document.form.nombre.focus();
return 0;
}

//Validamos un campo de texto como numérico, por ejemplo el campo teléfono de 9 dígitos
valor = document.form.telefono.value;
if( !(/^\d{9}$/.test(valor)) ) {
alert("Tiene que escribir un teléfono de 9 dígitos");
document.form.telefono.focus();
return 0;
}

//Validamos un campo de texto como email
if ((regexp.test(document.form.email.value) == 0) || (document.form.email.value.length = 0)){
alert("Introduzca una dirección de email válida");
document.form.email.focus();
return 0;
} else {
var c_email=true;
}

//Validamos un campo de lista/menú, por ejemplo el campo provincia
if (document.form.provincia.selectedIndex==0){
alert("Tiene que seleccionar su provincia");
document.form.provincia.focus();
return 0;
}

//Validamos un campo de tipo checkbox, por ejemplo condiciones
if (document.form.condiciones.checked==0){
alert("Debe aceptar las condiciones");
document.form.condiciones.focus();
return 0;
}

//Si todos los campos han validado correctamente, se envía el formulario
document.form.submit();
}

//Cerramos el Script
</script>

Ejecutamos la función cuando el usuario hace clic en el botón enviar de nuestro formulario.

<label><input type="button" id="enviar" onclick="valida_envia()"/></label>

Descargar ejemplo.

45 comentarios:

  1. muchas gracias me quedaron claras varias dudas !!

    ResponderEliminar
    Respuestas
    1. Genial! Me alegra saber que te he podido ayudar. Un saludo.

      Eliminar
  2. Gracias amigo, nuy claras tus explicaciones.
    ayudaron a validar mis formularios

    ResponderEliminar
  3. Me ha sido de gran ayuda tu documento.
    Saludos desde Puebla, México.
    Gracias.

    ResponderEliminar
    Respuestas
    1. Gracias Jesús; me alegra haber podido ayudarte. Un saludo.

      Eliminar
  4. Una pregunta, el document a que se refiere?

    soy nuevo en esto

    saludos

    ResponderEliminar
    Respuestas
    1. Hola Jorge; el objeto document contiene toda página que se está visualizando.

      Un saludo.

      Eliminar
  5. Tienes algún demo de como queda?

    ResponderEliminar
    Respuestas
    1. Hola; a través del siguiente enlace podrás descargar un ejemplo: http://goo.gl/G3fFdg

      Espero que te sirva de ayuda.

      También puedes revisar el siguiente post donde intento explicar como usar los SpryAssets http://goo.gl/l1sQT6

      Gracias.

      Eliminar
  6. Genial!!!
    Me estaba volviendo loco buscando cómo validar el checkbox con Dreamweaver hasta que he dado con tu comentario.

    He modificado un poco tu script para ajustarlo a los campos que tenía y ha funcionado a la primera.

    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Joseba; me alegra saber que te ha servido de ayuda. Un saludo.

      Eliminar
  7. Pero al enviar, no debería tener un campo donde envía el formulario?

    ResponderEliminar
    Respuestas
    1. Hola Enrique; si te fijas, el botón enviar solo nos sirve para ejecutar el script, si todo es correcto el formulario realiza la acción indicada en action=""

      Puedes revisar si quieres la función mail de PHP para el envío de formularios: http://goo.gl/VcDnrT

      Para realizar el envío del formulario, puedes crear un archivo PHP (enviar.php) con la función mail y en el formulario de contacto debes indicar como action="enviar.php"

      Espero haber resuelto tu duda. Un saludo.

      Eliminar
  8. Hola Juan! Muy claro tu script. Sólo una duda, ¿esto funciona también para validar que todos los campos estén llenos y no enviar el formulario en caso contrario?

    Saludos!

    ResponderEliminar
    Respuestas
    1. Hola rgv; si alguno de los campos no pasa la validación, te muestra una alerta y el formulario no se envía.

      Si te refieres a si existe algún otro método para validar todos los campos a la vez, te recomiendo usar los SpryAssets http://goo.gl/l1sQT6

      Espero haber aclarado tu duda. Saludos.

      Eliminar
  9. Gracias hermano!!!

    ResponderEliminar
  10. felicidades amigo, muy entendible, me sacaste de un apuro!

    ResponderEliminar
    Respuestas
    1. Gracias edgarev. Me alegra haber podido ayudarte. Saludos.

      Eliminar
  11. maestro, gracias por el aporte, me sirvio de mucho, una pregunta y como podria validar un archivo adjunto? si no cargar archivo como podria hacer

    ResponderEliminar
    Respuestas
    1. Gracias a ti José Antonio.

      Para validar un campo de archivo, el procedimiento es exactamente el mismo que para un campo de texto.

      Un saludo.

      Eliminar
  12. hola buenos dias!
    como le hago tengo 10 validaciones y si no lleno ningun campo me manda las 10 necesito que me mande alert 1 por cada submit

    ResponderEliminar
    Respuestas
    1. Hola; te paso un ejemplo HTML que hace precisamente lo que tú necesitas, mostrar los mensajes de error en un único Alert: https://db.tt/wM5JoZ3n

      Saludos!

      Eliminar
  13. Hola Juan Ignacio!,
    Tengo un formulario al que estoy intentando añadir un checkbox con la política de privacidad, que tiene que estar marcado obligatoriamente para que se envíe.
    Estoy intentando adaptar tu código, pero no me funciona. Puedes ayudarme, por favor?
    Te paso el ejemplo: http://www.estherserra.com/pop-up/index_popup.html
    Todo me funciona, pero no consigo que me pida que marque el checkbox antes de enviar...
    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola; he revisado el código del formulario que me envías, seguramente te habrán llegado un par de pruebas. He observado que no estás utilizando el código JavaScript de este ejemplo, estás validando los campos a través de otro método. Si quieres que te ayude a adaptar el código de validación, envíame un mensaje privado a través del formulario de contacto que aparece en el lateral y te ayudaré encantado. Saludos.

      Eliminar
  14. Amigo y luego que todos mis campos cumplan con lo requerido en mi .js, como redirecciono desde mi boton enviar mi archivo .php?

    ResponderEliminar
    Respuestas
    1. Hola Ronal;

      Debes poner en la etiqueta action de tu formulario el nombre del archivo.php que se encargará de procesar la acción correspondiente (enviar por email, grabar en una base de datos, etc.): <form action="nombre-de-tu-archivo.php" method="post"...

      Un saludo.

      Eliminar
  15. Hola amigo, te felicito! Es la mejor explicación que encontré en la web! Me ha funcionado todo perfectamente! :-) Sólo tengo una pregunta: Cómo le hago para que no se borren los datos al cerrar los alerts? Muchas, pero muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola; muchas gracias por tu comentario.

      Los datos no se borran al enviar el formulario y ejecutar el script, tienes que revisar tu código. Puedes descargar un ejemplo justo al final del post.

      Un saludo.

      Eliminar
  16. Hola, gracias por la ayuda, una pregunta: para que en vez de un mensaje de alerta te muestre una imagen u otra dependiendo de si es true o false como quedaría el código?
    saludos

    ResponderEliminar
    Respuestas
    1. Hola; para hacer lo que comentas puedes validar los campos haciendo uso de SpryAssets: http://jiestevez.blogspot.com.es/2012/05/validacion-de-campos-de-un-formulario.html

      Eliminar
  17. gracias!! porque en unos msj de alert llevan al final ";" y otros no?

    ResponderEliminar
    Respuestas
    1. Hola Cristian, perdona que haya tardado tanto tiempo en responder a tu comentario.

      En realidad, siempre debe llevarte al primer campo donde encuentre un error o esté vació y sea requerido.

      Saludos.

      Eliminar
  18. agradecido...soy nuevo en php y mysql....saludos y gracias por el aporte...un abrazo desde venezuela

    ResponderEliminar
    Respuestas
    1. Gracias a ti Jose por visitar el blog y dejar tu comentario. Saludos.

      Eliminar
  19. Hola pregunta, sabes como validar que en el campo se ingrese un numero de 8 o de 10 digitos. Cualquier otro tamaño que mande error.
    Intente con esta ^[0-9]{8,10}$
    Pero el problema ahi es que si pongo un numero de 9 digitos tambien lo acepta y es lo que no quiero.

    Espero me puedas ayudar, Saludos!!

    ResponderEliminar
  20. Hola y buenos días.
    Estoy buscando la manera de en un formulario que se acepten unas determinadas palabras como "permitidas".
    He encontrado el atributo Pattern con el que defino qué tipo de palabras, pero no sé hacer que sean sólo y exclusivamente las de un listado en concreto.

    ¿Para qué quiero esto? Para poner un formulario y que cuando lo rellenen, si tienen un código de invitación pueda el formulario enviar el mismo y sin ese código pues que no lo haga.

    Agradecería tu ayuda si fueras tan amable y un saludo

    Ulises de A1Click

    pd.-Como sé lo que cuesta mantener un blog...te pinché en un par de anuncios jeje :)

    ResponderEliminar
    Respuestas
    1. Hola, podrías obtener lo que necesitas de la siguiente manera:

      var code = /(codigo1|codigo2)/; // aquí introducirías tu listado de códigos válidos

      if ((code.test(document.form.codigo.value) == 0) || (document.form.codigo.value.length = 0)){
      alert("Introduzca un código valido");
      document.form.codigo.focus();
      return 0;
      } else {
      var c_codigo=true;
      }

      Espero que te sirva esta posible solución.

      Saludos.

      Eliminar
    2. Hola Juan Ignacio, en primer lugar agradecer tu pronta respuesta y por supuesto la ayuda prestada.

      Voy a probar,y cuando digo probar es literal porque al no tener mucha idea de lo que hago voy más por ensayo error que por otra cosa...eh, pero cabezón yo que al final lo consigo y esta vez no va a ser menos. jajajaja

      Vuelvo a picar en la publicidad.

      Gracias

      Eliminar
    3. Gracias a ti por visitar el blog, dejar tus comentarios y clicar en la publicidad ;)

      Lo único que tienes que asegurarte de cambiar es tanto el nombre del formulario como del campo código, es decir, donde pone form en la función javascript debes cambiarlo por el nombre de tu formulario y donde pone codigo por el nombre de tu campo donde los usuarios deben introducir los códigos.

      Si tienes cualquier otra duda, ya sabes!

      Saludos.

      Eliminar
  21. Hola otra vez.

    Te envié un mensaje por el formulario de contacto porque no me dejaba poner aquí el código.

    Un saludo y gracias eternas.

    ResponderEliminar
  22. Hola Juan Ignacio....al final creo que lo he solventado de la siguiente forma.

    Cuando en el formulario pongo lo siguiente

    --input name="Referenciado por" type="text" required class="form-control" pattern="CARACOL|PATATA" id="Referenciado por" placeholder="Pon el Código Vip o pídeselo a un amigo"--

    En pattern coloco las claves separadas por la barrita esa vertical y listo.

    Jo....vaya...miles de gracias por tu ayuda.

    Al final lo más simple es lo que me sirvió.

    Un abrazo

    ResponderEliminar

Entradas populares

Sobre el autor

Mi foto

Me llamo Juan Ignacio Estévez. Soy técnico publicitario por el Centro Español de Nuevas Profesiones (CENP).

Comencé desarrollando mi carrera profesional en estudios de diseño y agencias de publicidad como director de arte, siempre enfocado al mundo Offline. Sin embargo, pronto sentí curiosidad por el Online. Desde entonces, he intentado formarme en este sector, a través de diferentes cursos de formación y de forma autodidacta.

Puedes ver mi perfil completo en LinkedIn. ¿Hacemos Networking?