Have you noticed that sometimes when you register on one or another page, when you change focus in terms of textbox, either by tabulating or directly with a click, a message appears next to it validating the data?
Be careful, this without doing a 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 postbacks, and I lose the focus of said textbox, which forces me to click on it again.
What I am looking for is the same effect that we find in most registration pages, but I don't 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 such as lostfocus, onclick, among others, events which, I suppose, would make things easier.
Surely you are doing postback when you press "enter", the tabulation does not postback.
As for validation by focus change, this is done with Jquery. What you should do is:
1-Assign Id to the Textbox. 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.
3-Create a <script> section in your html page
4-Inside the script section create a JQuery section as follows:
jQuery(function ($) {
All the code goes here in the middle
}); 5-Inside the Jquery section, the "onChange" events of textbox1 and textbox2 are called as follows:
6-Then we create 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 like this:
-url is the php page or controller that 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 to it -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 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 the caller, it could do X number of things, put if, for, etc, etc, assign a poster to a div.
7-The On change events of point 5 should be modified to be consistent with point 6, I put them with little code so you don't get lost, but I put them updated below:
Beyond everything explained, I recommend you use 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 it has X pattern and that's it, and it is automatically validated when you submit generating the posters automatically.
I hope it has been useful to you!!!
Quite useful. But it happens that at first it didn't give me the way you proposed. It was when I began to scrutinize a little more and came to this solution:
I create a textbox like this:
Then I create a span that will be visible if the wrong user is entered:
the css style for the_span: .hidden{visibility:hidden;color: red;}
And finally, in the script, I have the following:
It works perfectly. All thanks to the onblur event. And then with a button I will validate that the user has not been created by consulting the database, another matter.
And after that I decided to try the solution that you proposed, seojedaperez, and it also came in handy, of course with a few fixes in the view.
I thank you and everyone who guided me.