Ago 07 2008

Validar formularios web con JavaScript y Expresiones Regulares {

Tag: JavaScript —

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.

}

Página 1 de 11