Textbox on asp.net

0

Have you noticed that sometimes they register on one or another page, when changing focus in terms of textbox, either tabulating or directly with a click, beside it appears a message validating the data?

Eye, this without doing postback or anything, because, in my case, every time I change focus, the page does a postback.

Suppose I want to go from textbox1 to textbox2, if I focus on textbox2 to select it, the page does postback, and I lose the focus of that textbox, which forces me to click on it again.

What I'm looking for is the same effect that we found on most registration pages, but I do not know how.

I understand that textboxes in web forms do not have the same events as windows forms, since in the first case there are no events like lostfocus, onclick, among others, events which, I suppose, would make things easier.

    
asked by Necroyeti 17.07.2017 в 15:59
source

2 answers

0

You are probably doing postback by pressing "enter", the tab does not postback.

Regarding the validation by change of focus, this is done with Jquery. What you should do is:

1-Assign Id to Textboxes. Let's say id = texbox1, id = texbox2

2-Add Jquery library to your page. This can be done by calling the online or offline bookstore.

     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-Create a section < script > on your html page

4-Inside the script section create a JQuery section in the following way:

jQuery (function ($) {

All the code goes here in the middle

}); 5-Inside the Jquery section are called the events "onChange" of textbox1 and textbox2 as follows:

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

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

6-Then we created the validate function, which could validate the quality of the information entered or the existence of a data in the database. If it were the latter you should create an Ajax function as follows:

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

        }
    });
}

-url is the php or controller page you use / The name of your actionresult or method -data are the variables that the action result or method receives -Value is the variable that you pass -dataType here you clarify that it is json -type you have GET and POST, in this case we use GET to receive a value and not do postback -success is what happens when the action result is executed without errors -result is the variable that the action result should return (remember to return a value in action result) -In this case I return it to whoever calls it, X number of things could be done, put if, for, etc, etc, assign a sign to a div.

7-The events On change of point 5 should be modified to be according to point 6, I put them with little code so you do not get lost, but I update them below:

    $("#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
     }
    });

Beyond everything explained, I recommend using HTML5 validations, they are easier and they are automatic, you only have to declare if X field is numeric, or text, or date, or if you have X pattern and you are ready, and Automatically validates when you submit by generating the posters automatically.

I hope you have been useful !!!

    
answered by 17.07.2017 / 19:03
source
0

Quite useful. But it happens that the first time he did not give me the way you proposed. It was when I began to search a little more and come to this solution:

I create a textbox like this:

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

Then I create a span that will be visible if a wrong user is entered:

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

the style of css for el_span: .oculto {visibility: hidden; color: red;}

And finally, in the script, I have the following:

 <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>

It works to perfection. All thanks to the onblur event. And then with a validate button that the user has not been created by consulting the database, flour otherwise.

And after that, I decided to try the solution you proposed, seojedaperez, and it also came as a surprise, of course with a few sight arrangements.

I thank you, and all those who guided me.

    
answered by 18.07.2017 в 20:44