Ago 07

Validar formularios web con JavaScript y Expresiones Regulares

Etiquetas: JavaScript Versión para imprimir — Pablo

En este post vamos a validar un formulario web con 3 campos, un campo Nombre que será obligatorio, un campo Email que será obligatorio y un campo numérico que será opcional pero sólo podrá contener números.

Para validar los campos email y numérico utilizaremos expresiones regulares, ya que es la manera más fácil, y a mi entender correcta, de validar el contenido de un campo.

En el formulario web utilizamos el evento onsubmit junto con una función de JavaScript que retorne true cuando la validación de los campos sea correcta, para que el formulario no complete el submit en caso de un error en la validación al onsubmit no le escribiremos sólo el nombre de la función, sino que utilizaremos return junto con el nombre de la misma.

function validar(form) {
	var emailRegEx = /^((\w|\.){2,}@)\w{3,}\.\w{2,4}((\.(\w{2}))?)?$/
	var numericoRegEx = /^\d*$/
 
	if(form.txtNombre.value == "") {
		form.txtNombre.focus();
		alert("El campo 'Nombre' es obligatorio!");
		return false;
	}
	if(form.txtEmail.value == "") {
		form.txtEmail.focus();
		alert("El campo 'Email' es obligatorio!");
		return false;
	} else {
		if(!form.txtEmail.value.match(emailRegEx)) {
			form.txtEmail.focus();
			form.txtEmail.value = "";
			alert("Debe ingresar una dirección de email válida.");
			return false;
		}
	}
	if(form.txtNumero.value !== "") {
		if(!form.txtNumero.value.match(numericoRegEx)) {
			alert("El campo 'Campo numérico' sólo puede contener números.");
			form.txtNumero.focus();
			form.txtNumero.value = "";
			return false;
		}
	}
	return true;
}

La función que tenemos arriba de estas líneas hace una validación y muestra el mensaje de error al estilo antiguo: con un messagebox, en javascript alert(); pero en estos días que están de moda los formularios que usan tecnología ajax, adaptaremos la función para que en lugar de mostrar el error en el messagebox, lo muestre en una celda de la tabla que contiene los campos del formulario, para ello recurriremos a la función de javascript document.getElementById(ElementId);

function validar2(form) {
	var emailRegEx = /^((\w|\.){2,}@)\w{3,}\.\w{2,4}((\.(\w{2}))?)?$/
	var numericoRegEx = /^\d*$/
 
	if(form.txtNombre.value == "") {
		form.txtNombre.focus();
		mostrar("El campo 'Nombre' es obligatorio!");
		return false;
	}
	if(form.txtEmail.value == "") {
		form.txtEmail.focus();
		mostrar("El campo 'Email' es obligatorio!");
		return false;
	} else {
		if(!form.txtEmail.value.match(emailRegEx)) {
			form.txtEmail.focus();
			form.txtEmail.value = "";
			mostrar("Debe ingresar una dirección de email válida.");
			return false;
		}
	}
	if(form.txtNumero.value !== "") {
		if(!form.txtNumero.value.match(numericoRegEx)) {
			mostrar("El campo 'Campo numérico' sólo puede contener números.");
			form.txtNumero.focus();
			form.txtNumero.value = "";
			return false;
		}
	}
	return true;
}
 
function mostrar(error) {
	document.getElementById('Errores').innerHTML = error;
	document.getElementById('Errores').style.background = "#ffcccc";
}

Haz click aquí para ver este ejemplo funcionando.

También te puede interesar:

Comentarios[4]

  1. conradoNo Gravatar
    Agosto 9, 2008 16:07hs

    Muy bien el formulario, excelente el ejemplo. Muchas gracias por compartirlo.

    saludos

  2. joseNo Gravatar
    Agosto 23, 2008 23:20hs

    bueno manejo de la expresiones regulares.

  3. paolaNo Gravatar
    Septiembre 7, 2008 2:54hs

    muy bueno para que y sobre todo porque no saben cuanto nos sirve este tipo de informaacion para validacion de formularios, sinembargo me gustaria que explicaran mas a fondo las expreciones regulares o almenos de otros campos como por ejemplo la direccion pero residencial o de una vivienda ya que esta tambien tiene como unos ciertos parametros si uno se pone a mirar

  4. PabloNo Gravatar
    Septiembre 7, 2008 21:48hs

    @paola, voy a preparar un post sobre expresiones regulares, de manera que sea genérico y puedas crear tus propias validaciones.

Deja un comentario