Blur event in jQuery

In this lesson, you will learn about the blur event in the jQuery works. This event is a form-related event and is fired when a user tabs out of text field or clicks outside of the currently focused text field or area. This event is usually used to validate text field input date.

Introduction to Blur event in jQuery

For example, you have a contact form on a web application, and you need the user to enter his/her contact information, like email address, phone number, etc. But, what if the user doesn’t enter the data correctly or leave the email field empty and hits the submit button? Instead of showing all the errors at the same time after form submission, notify the user if he/she makes mistakes while entering the data.

The syntax of the blur() function is:

.blur( function(){});

The function will act as an event handler and will be executed each time the event is fired.

This is also a short way of writing .on("blur", function(){});

Example of Blur event in jQuery

In this example, we have created a simple form that has two text fields and one button. The text fields ask for the user’s name and phone number, respectively.

The first text field is attached with the blurred field and will notify the user if he/she enters a number in the name field. The blur event is fired only when the user clicks outside the name field or move to the next field by pressing the tab key.

If the user enters 2 and press tab key, the alert message will be shown. But if the user enters 2a and leave the text field, there won’t be an alert message as jQuery will consider it as a string and not a number.

If you feel that alert message you be shown every time user enter a number, there is another event for that – key down.

The HTML

<div id="container">
   <form action="">
      <label for="uname">Your Name</label>
      <input type="text" name="uname" id="uname"><br><br>
      <label for="number">Phone Number</label>
      <input type="text" name="number" id="number"><br><br>
      <input type="submit" name="submit" value="submit">
   </form>
</div>

The CSS

label {
	width: 100px;
	display: block;
}

input {
	width: 80%;
}

#container {
	margin: 20px;
	padding: 10px;
	border: 1px solid #ccc;
	width: 400px;
}

The jQuery

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" >
    </script> 
  <script >
    $(document).ready(function() {
        $("#uname").blur(function() {

            var val = $(this).val();
            if (!isNaN(val)) {
                alert("Name field can't have number.");
            }
        });
    }); 
    </script>

The blur event could be confusing if you are new to programming. To understand the concept copy-paste the following code in your favorite editor and test the code yourself.

Feel free to ask any question related to the blur event or jQuery in general in the comment section below.

jQuery Click Event

Tutorial Home

jQuery Focus Event