Nuevos Programadores

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.

}

Muchas veces nos es útil capturar una imagen del momento en que se produce un error para saber qué sucedió o cómo solucionarlo. Sin ir más lejos, en mi trabajo anterior instalamos una aplicación y a veces teníamos un error que después de hacer guardias de 8hs frente a los usuarios no pudimos encontrar y las explicaciones y suposiciones de los usuarios carecían totalmente de sentido.

Por eso mismo muchas veces es bueno capturar el estado de la aplicación en el momento, en este ejemplo vamos a capturar una imágen de la ventana activa y la vamos a guardar.

Lo primero que haremos será la función que captura la imágen, para eso utilizaremos el viejo y conocido recurso de apretar la tecla PRINT SCREEN, y para eso utilizaremos la función SendKeys.Send.

    Private Sub ImprimirPantalla()
        SendKeys.Send("{PRTSC}")
        GuardarImagenDesdeClipboard()
    End Sub

Lo que hemos hecho hasta este momento es capturar la imagen, la misma queda en el portapapeles de Windows, así que para que nos sea útil necesitamos guardarla en un archivo debidamente identificado, para ello extraeremos la imagen del portapapeles y nos crearemos un archivo cuyo nombre se comprondrá de la fecha-hora actual y el nombre de la clase que generó la excepción.

    Private Sub GuardarImagenDesdeClipboard()
        If Clipboard.ContainsImage() Then
            Dim NombreArchivo As String = String.Format("{0}_{1}.jpg", DateTime.Now.ToString("yyyyMMdd-HHmmss"), Me.Name)
            Dim Path As String = String.Format("{0}\logs\imagenes\{1}", Application.StartupPath, NombreArchivo)
            Dim img As Image = Clipboard.GetImage()
            img.Save(Path)
        End If
    End Sub

Hay que tener en cuenta que para que la imágen se guarde es necesario que el directorio donde se va a guardar exista previamente, por eso sería conveniente chequear su existencia y si es necesario crearlo, antes de intentar guardar la imagen.

}