Example of the onblur event in Javascript – Wingdings Translator Online

Javascript script that shows working with the onblur event. The validity of a piece of data is checked when leaving the text field where it is written.

Onblur is triggered when the user removes the app’s focus from a page element. The focus of the application is where the cursor is.

If, for example, we are located in a text field and we leave that field, either because we click with the mouse in another field of the form or in an empty area, or because the user has pressed the tabulator button (Tab) that moves the focus to the next element on the page.

If I want, when placed outside a text field, to check that the entered value is correct, I can use onblur and call a function that checks if the data is correct. If it is not correct, I can force the focus of the application to be placed again on the text field and notify the user to change said value.

It can be an interesting way to make sure that a valid value is found in a text field. Although it has some downside, as we will see later.

Let’s start with a simple case, where we just want to check a text field to make sure it’s an integer.

onblur event

Type an integer: < /form>

When leaving the text field (onblur) verificaValidoEntero() is executed, which uses the function validateInteger, explained in a Javascript workshop. If the value returned by the function is not an integer, in this case an empty string would be received, display a message in an alert box, select the text typed in the box, and place the application focus on the text box , for the user to put another value.

Until the visitor types an integer in the text field, the focus of the application will remain on the field and it will continue to receive error messages.

Technique for validating form fields with the onblur event

Now we are going to show a possible technique to check the data of a form field. Now we are going to see how to evolve this technique if we have more than one field to validate, since the problem can be quite complicated.

In fact, before reading our proposed solution, I think it would be a good practice for the reader to do the same example for two fields and work a little with the page to see if we find any problems.

Most likely we will find a curious infinite loop that will give us more than one headache to solve it.

In practice, the reader may try to validate an integer and a postal code. To validate a postal code we need to verify that it is a text string made up of 5 characters and all of them are integers, at least for codes in Spain.

In case someone wants to try it, the function to validate a postal code would be something like this:

It simply takes care of checking that the text field contains 5 characters and going through each of the characters to check that they are all integers. At first it is assumed that the postal code is correct, setting the variable CPValido to true, and if any check fails, the correct status is changed to incorrect, passing said variable to false.

You can try setting up the example with two fields… we are now going to give a solution to the rather complicated problem, since we include instructions to avoid the effect of the infinite loop. We are not going to see the example that would give the error, we leave it for those who want to try it for themselves and we recommend doing it because that way we will better understand the following code.

onblur event

Type an integer:
Type a zip code: *expects a string with 5 numeric characters

This example follows the guide from the beginning of this article, including a new field to validate.

To solve the issue of the infinite loop, which you may have been able to investigate for yourselves and in which one alert box after another was displayed indefinitely, we have used a variable called warned that contains a true if it has already been warned that the field was wrong and a false if it has not been notified yet.

When the alert box is going to be displayed, it checks whether or not the user has been warned. If it has already been notified, nothing is done, preventing more alert boxes from being displayed. If it had not yet been notified, the alert box is displayed and the focus is placed on the field that was incorrect.

To reset the warned variable to false, so that the next time the value is mistyped the corresponding message is displayed, the setTimeout method is used, which executes the instruction with a delay, in this case 50 milliseconds. Enough so that it doesn't get into an infinite loop.

Technique for validating form fields with the onblur event

Related posts:

Related Posts