Cuando queremos enviar datos hacia el servidor a través de un formulario HTML, por ejemplo en ASP .NET Web Forms, necesitamos validar en el cliente los datos para lo cual debemos usar Javascript.
El método tradicional de Javascript usado era asociar una función a un evento de un control dentro del cuerpo del formulario, por ejemplo en el evento onclick de un botón. A este tipo de Javascript se le conoce como "Javascript Obstrusivo" y lo malo es que mezcla el diseño con el código.
Con la aparición de jQuery se habla mucho de "Javascript No Obstrusivo" que consiste en asociar una función a un evento de un control por código sin interferir en el HTML, pero esta técnica nace gracias a DOM Nivel 2 que incorpora los métodos addEventListener, que permiten asociar a un evento de un control una función Javascript explicita (con nombre) o anónima (sin nombre).
Para los que No conocen que es DOM, significa el Modelo de Objetos del Documento, por ejemplo, el DOM Nivel 1 tiene los objetos Document, Window, Browser y el DOM Nivel 2 el método "addEventListener()" que usaremos para asociar eventos en tiempo de ejecución, junto con el método "preventDefault()" para cancelar el envío del formulario en el click del botón.
Validación del Formulario WebForm con Javascript Obstrusivo
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Obstrusiva.aspx.cs" Inherits="Validacion.Obstrusiva" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
function validarDatos() {
if (validarCampo("txtNombre", "Ingresa el Nombre") == false) return false;
if (validarCampo("cboCurso", "Seleccione el Curso") == false) return false;
return true;
}
function validarCampo(idControl, mensaje) {
var campo = document.getElementById(idControl);
if (campo != null) {
if (campo.value == "") {
alert(mensaje);
campo.focus();
return false;
}
}
else return false;
return true;
}
</script>
</head>
<body style="background-color:aqua">
<form id="form1" runat="server">
<div>
<h2>Validación Obstrusiva con Javascript</h2>
<h3>Registro de Alumnos</h3>
Nombre:
<asp:TextBox ID="txtNombre" runat="server" /><p />
Curso: <asp:DropDownList id="cboCurso" runat="server">
<asp:ListItem value="">Seleccione</asp:ListItem>
<asp:ListItem value="NET">NET</asp:ListItem>
<asp:ListItem value="Java">Java</asp:ListItem>
<asp:ListItem value="PHP">PHP</asp:ListItem>
</asp:DropDownList><p />
<asp:Button ID="btnEnviar" OnClientClick="return validarDatos();" Text="Enviar" runat="server" />
</div>
</form>
</body>
</html>
Nota: En el control Web "Button" se está asociando a la propiedad "OnClientClick" la función Javascript: "validarDatos()". Al devolver false la función no irá al servidor.
Validación del Formulario WebForm con Javascript No Obstrusivo
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NoObstrusiva.aspx.cs" Inherits="Validacion.NoObstrusivo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.addEventListener("load", crearValidacion, false);
function crearValidacion() {
var btn = document.getElementById("btnEnviar");
btn.addEventListener("click", validarDatos, false);
function validarDatos(e) {
if (validarCampo("txtNombre", "Ingresa el Nombre",e) == false) return false;
if (validarCampo("cboCurso", "Seleccione el Curso",e) == false) return false;
return true;
}
function validarCampo(idControl,mensaje,e) {
var campo = document.getElementById(idControl);
if (campo != null) {
if (campo.value == "") {
alert(mensaje);
campo.focus();
e.preventDefault();
return false;
}
}
else return false;
return true;
}
}
</script>
</head>
<body style="background-color:aqua">
<form id="form1" runat="server">
<div>
<h2>Validación No Obstrusiva con Javascript</h2>
<h3>Registro de Alumnos</h3>
Nombre:
<asp:TextBox ID="txtNombre" runat="server" /><p />
Curso: <asp:DropDownList id="cboCurso" runat="server">
<asp:ListItem value="">Seleccione</asp:ListItem>
<asp:ListItem value="NET">NET</asp:ListItem>
<asp:ListItem value="Java">Java</asp:ListItem>
<asp:ListItem value="PHP">PHP</asp:ListItem>
</asp:DropDownList><p />
<asp:Button ID="btnEnviar" Text="Enviar" runat="server" />
</div>
</form>
</body>
</html>
Nota: En el código Javascript se asocia al evento "load" de la ventana (window) la función "crearValidacion()", la cual captura el botón y asocia a su evento "click" la función "validarDatos()". Para evitar enviar el formulario al servidor al estar vacío un campo se usa el método: "preventDefault()".
Comentario Final
En lo posible hay que usar Javascript No Obstrusivo para evitar mezclar el diseño con el código, ya sea usando jQuery o Javascript nativo. Actualmente, todos los navegadores soportan DOM Nivel 2 así es que el método "addEventListener" correrá sin problemas.
Descarga:
Validacion_WebForm_Javascript
Excelente post profesor! Justo lo que andaba buscando!! Gracias por compartir su conocimiento!!
ResponderBorrarBuen post, ahora me queda claro cual es la mejor forma y porque. Y sobretodo los conceptos de Obstrusivo y no Obstrusivo en JavaScript. Gracias...
ResponderBorrarEs bueno saber que estos post los pueden ayudar a mejorar sus técnicas de programación y ha aclarar sus dudas. Saludos.
ResponderBorrarMuy bien explicado profesor, exelente post, pero una pregunta si quisiera pasar parametros a un evento, en su ejemplo lo tendría que hacer con una función anónima?.
ResponderBorrarDavid. El método addEventListener se asocia a eventos de controles u objetos, y si deseas pasar parametros hay 2 formas:
ResponderBorrar1. Defines una función anónima
control.addEventListener("evento", function(){ algunaFuncion(parametro); }, false);
2. Defines una variable al control y usas la propiedad target del evento:
control.addEventListener("evento", algunaFuncion, false);
control.Parametro = "valor del parametro";
function algunaFuncion(e) { alert(e.target.Parametro); }