0

¿Han notado que algunas veces que se registran en una que otra página, al cambiar de foco en cuanto a textbox, ya sea tabulando o directamente con un click, al lado del mismo aparece un mensaje validando los datos?

Ojo, esto sin hacer postback ni nada, porque, en mi caso, cada que cambio de foco, la página hace un postback.

Supongamos que quiero pasar de textbox1 a textbox2, si hago foco en textbox2 para seleccionarlo, la pagina hace postback, y pierdo el foco de dicho textbox, lo que me obliga a hacer nuevamente click en él.

Yo lo que busco es el mismo efecto que encontramos en la mayoría de páginas de registro, pero no se cómo.

Tengo entendido que los textbox en web forms no tienen los mismos eventos que windows forms, ya que en el primer caso se carece de eventos como lostfocus, onclick, entre otros, eventos los cuales, supongo, facilitarían mas las cosas.

5
  • no deberia haber ningun postback por cambiar el foco de un textbox a otro.. lo que queres es un validador del lado del cliente?
    – gbianchi
    el 17 jul. 2017 a las 14:02
  • Lo que estás haciendo es un evento en el código de atrás de cuando se pierde el focus, y siempre que vas a ejecutar el código de atrás la página hace postback, ahora para hacer esas validaciones que tu dices tienes que hacerlo en el html, usando JavaScript, JQuery, o cualquier otro framework que se ejecute del lado del usuario. el 17 jul. 2017 a las 14:16
  • gracias a ambos por responer. Exacto, esto en el lado del cliente y, consultando, veo que todo apunta por los lados de javascript, jquery, ajax... en fin. Estas herramientas no las manejo muy bien. Ahora me surge una nueva pregunta: ¿Sera que desde javascript se puede llamar el metodo de un evento desde el codebehind y luego pasarlo a un onblur directamente de asp? Y si es asi, ¿Como es esto posible?
    – Necroyeti
    el 17 jul. 2017 a las 14:22
  • 1
    Si quisieras que se valide en un método en el servidor, tendrías que usar ajax, para que no se vea el postback, de igual manera, lo que podrías hacer es una doble validación, si no estás totalmente conforme con validaciones del lado del cliente, validaciones del lado del usuario al llenar los campos y al final, cuando vayas a enviar todos los datos al servidor haces las respectivas validaciones, así solo haces un postback. el 17 jul. 2017 a las 14:27
  • Bueno, algo es algo, gracias por encaminarme a ajax, creo que lo estoy consiguiendo. Ya por lo menos se que la respuesta esta en un updatepanel. Probe actualizando una fecha almacenada en un label cada vez que hago click en un boton y resulta ser que la pagina no hace postback! Pero lo que quiero, es eso mismo pero cuando haga click sobre un textbox. Es decir, acualizar la fecha al hacer click en un textbox en lugar de un boton. ¿Es posible? ¿Con algun evento quizá?
    – Necroyeti
    el 17 jul. 2017 a las 16:17

2 respuestas 2

0

Seguramente estas haciendo postback al apretar "enter", la tabulacion no hace postback.

En cuanto a la validacion por cambio de foco, esto se realiza con Jquery. Lo que deberias hacer es:

1-Asignar Id a los Textbox. Digamos id=texbox1,id=texbox2

2-Añadir libreria Jquery a tu pagina. Esto se puede hacer llamando a la libreria online u offline.

     A-Para llamarla de forma online tendrias que poner algo asi en la cabecera de tu header: <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

     B-Si la quisieras tener offline la tendrias que descargar en una carpeta de tu proyecto y llamarla.<br/>

3-Crear una seccion < script > en tu pagina html

4-Dentro de la seccion script crear una seccion JQuery de la siguiente forma:

jQuery(function ($) {

Todo el codigo va aca en el medio

}); 5-Dentro de la seccion Jquery se llaman a los eventos "onChange" de textbox1 y textbox2 de la siguiente manera:

    $("#TextBox1").on('change', function () {
          Validar();
    });

    $("#TextBox2").on('change', function () {
          Validar();
    });

6-Luego creamos la funcion validar, que podria validar la calidad de la informacion ingresada o la existencia de un dato en la base de datos. Si fuese lo segundo deberias crear una funcion Ajax de la siguiente manera:

     function Validar(Valor){
       $.ajax({
        url: '/NombreDeTuPagina/NombreDelActionResult',
        data: { variableActionResult: Valor },
        dataType: 'json',
        type: 'GET',
        success: function (result) {
            return result;
        },
        error: function (data) {

        }
    });
}

-url es la pagina php o controller que uses/El nombre de tu actionresult o metodo -data son las variables que recibe el action result o metodo -Valor es la variable que le pasas -dataType aca aclaras que es json -type tenes GET y POST, en este caso usamos GET para recibir un valor y no hacer postback -success es lo que sucede cuando se ejecuta el action result sin errores -result es la variable que el action result deberia devolver (recordar hacer return de un valor en action result) -En este caso yo lo regreso a quien lo llama, podria hacerse X cantidad de cosas, poner if, for, etc, etc, asignar un cartel a un div.

7-Los eventos On change del punto 5 se deberian modificar para que sea acorde al punto 6, te los puse con poco codigo para que no te pierdas, pero los pongo actualizados a continuacion:

    $("#TextBox1").on('change', function () {
          var variable =$("#TextBox1").val(); //aca capturo el valor del txtbox
          if(Validar(variable )==true){   //Validar deberia devolver un bool para que funcione
    ... todo ok

     }else{

    ...en caso de no validar podria tirar un warning o dejar un mensaje en un div debajo del textbox
     }



    $("#TextBox2").on('change', function () {
          var variable =$("#TextBox2").val();//aca capturo el valor del txtbox
          if(Validar(variable )==true){   //Validar deberia devolver un bool para que funcione
    ... todo ok

     }else{

    ...en caso de no validar podria tirar un warning o dejar un mensaje en un div debajo del textbox
     }
    });

Mas alla de todo lo explicado te recomiendo usar las validaciones de HTML5, son mas faciles y son automaticas, solo tenes que declarar si X campo es numerico, o texto, o fecha, o si tiene X patron y listo, y se valida automaticamente cuando haces submit generando los carteles de forma automatica.

Espero que te haya sido util!!!

0

Bastante util. Pero pasa que a la primera no me dio de la manera que propusiste. Fue cuando me puse a escudriñar un poco mas y llegue a esta solucion:

Creo un textbox de esta manera:

 usuario:
<asp:TextBox ID="TextBox7" runat="server" onblur="validar(this.id)" MaxLength="15" ></asp:TextBox>

Luego creo un span que sera visible si se ingresa un usuario errado:

 <Span id="el_span" class="oculto">El nombre de usuario no es valido</Span>

el estilo de css para el_span: .oculto{visibility:hidden;color: red;}

Y por ultimo, en el script, tengo lo siguiente:

 <head>
  <script>
    function validar(y) {
        patron = /^[a-z0-9ä-ü][a-z0-9ä-ü_]{1,30}$/; //Patron del regex
        var x = document.getElementById(y).value //Con esto capturo en x el texto que se almacena en  el textbox

        //si tiene mas de 4 caracteres, no contiene espacios en blanco y cumple con el patron del regex entonces...     
        if (x.length >= 5 && (x.match(/ /) != false && x.match(patron))) {

            //...El color de fondo del textbox se torna verde y el_span se oculta o permaence oculto 
            document.getElementById(y).style.background = "#8ff867";
            document.getElementById("el_span").style.visibility = 'hidden';      
        }

        else {

            //...De lo contrario el color de fondo del textbox se tornara de un rojizo y el_span aparecera
            document.getElementById(y).style.background = "#f88067";
            document.getElementById("el_span").style.visibility = 'visible';
        }
    }

    </script>
   </head>

Funciona a la perefeccion. Todo gracias al evento onblur. Ya luego con un boton validare que el usuario no se haya creado consultando en la base de datos, harina de otro costal.

Y despues de eso me dio por probar la solucion que propusiste,seojedaperez, y tambien me vino de maravilla, claro que con unas cuantos arreglos de vista.

Le agradezco, a vos y todos los que me orientaron.

1
  • No conozco las dimensiones de tu aplicativo, pero si a futuro esta proyectado que crezca mucho y tenga muchas funcionalidades no te recomiendo usar JQuery para validar "manualmente" cada elemento html con un Div, te vas a volver chino. Te lo dice alguien que siguio el camino que estas siguiendo y termino con 5 mil lineas de codigo en javascript. Es mas facil usar validaciones HTML5, es automatico, te evitas armar JQuery, evitas crear divs, pones el tipo de dato/patron de dato en el mismo item html y todo se genera de forma mas automatizada. el 19 jul. 2017 a las 13:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.