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.

Comentarios

Anónimo ha dicho que…
muchas gracias me quedaron claras varias dudas !!
jiestevez ha dicho que…
Genial! Me alegra saber que te he podido ayudar. Un saludo.
Anónimo ha dicho que…
Gracias amigo, nuy claras tus explicaciones.
ayudaron a validar mis formularios
jiestevez ha dicho que…
Muchas gracias a ti por dejar tu comentario.
Unknown ha dicho que…
Me ha sido de gran ayuda tu documento.
Saludos desde Puebla, México.
Gracias.
jiestevez ha dicho que…
Gracias Jesús; me alegra haber podido ayudarte. Un saludo.
Jorge Aquino ha dicho que…
Una pregunta, el document a que se refiere?

soy nuevo en esto

saludos
jiestevez ha dicho que…
Hola Jorge; el objeto document contiene toda página que se está visualizando.

Un saludo.
Anónimo ha dicho que…
Tienes algún demo de como queda?
jiestevez ha dicho que…
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.
Unknown ha dicho que…
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.
jiestevez ha dicho que…
Hola Joseba; me alegra saber que te ha servido de ayuda. Un saludo.
Pero al enviar, no debería tener un campo donde envía el formulario?
jiestevez ha dicho que…
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.
rgv ha dicho que…
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!
jiestevez ha dicho que…
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.
Daniel Báez ha dicho que…
Gracias hermano!!!
jiestevez ha dicho que…
Gracias a ti Daniel por visitar el blog.
edgarev ha dicho que…
felicidades amigo, muy entendible, me sacaste de un apuro!
jiestevez ha dicho que…
Gracias edgarev. Me alegra haber podido ayudarte. Saludos.
Unknown ha dicho que…
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
jiestevez ha dicho que…
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.
Anónimo ha dicho que…
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
jiestevez ha dicho que…
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!
Anónimo ha dicho que…
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!
jiestevez ha dicho que…
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.
Unknown ha dicho que…
Amigo y luego que todos mis campos cumplan con lo requerido en mi .js, como redirecciono desde mi boton enviar mi archivo .php?
jiestevez ha dicho que…
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.
Anónimo ha dicho que…
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!
jiestevez ha dicho que…
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.
Anónimo ha dicho que…
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
jiestevez ha dicho que…
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
Anónimo ha dicho que…
Gracias
Unknown ha dicho que…
gracias!! porque en unos msj de alert llevan al final ";" y otros no?
jiestevez ha dicho que…
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.
Unknown ha dicho que…
agradecido...soy nuevo en php y mysql....saludos y gracias por el aporte...un abrazo desde venezuela
jiestevez ha dicho que…
Gracias a ti Jose por visitar el blog y dejar tu comentario. Saludos.
AplicacionesMoviles ha dicho que…
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!!
Anónimo ha dicho que…
ok
Ulises García García ha dicho que…
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 :)
jiestevez ha dicho que…
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.
Ulises García García ha dicho que…
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
jiestevez ha dicho que…
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.
Ulises García García ha dicho que…
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.
Ulises García García ha dicho que…
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
Anónimo ha dicho que…
como hacer para que al momento de que oculte div's se quiten las validaciones
jiestevez ha dicho que…
Lo desconozco, lo siento!

Entradas populares de este blog

Enlaces tipo ancla con desplazamiento animado con jQuery