jQuery blur – How to Use the blur() Method on an HTML Form

The jQuery blur method will occur when an element (most of the time an input) loses the user’s focus. This occurs when either the user mouse clicks away from that element, or tabs away from it using the keyboard.

$("input").blur(function(){
  //do something
});

Let’s say we have the following HTML:

<form>
  <label for="fname">Full Name:</label>
  <input type="text" id="fname" name="fname">
  <button type="submit" value="Submit">Submit</button>
</form>

To get the value that the user has entered for “Full Name”, we could use the jQuery blur() method along with the val() method.

Once the user has typed a name and leaves the input field, the blur method will be triggered.

$("#fname").blur(function(){
  var inputVal = $("#fname").val();
});

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery("#fname").blur(function(){
  var inputVal = jQuery("#fname").val();
});

This can also be done using the jQuery focusout() method.

An Interactive Example of the jQuery blur() Method

Below we will have a simple form with a name field and a submit button. One thing that is common in a lot of online forms is making sure actual information is entered before allowing the user to submit a form.

So below we will have a form that only lets you submit the information if you put in anything in the name field. If the user enters the name field but does not enter anything, we will display a warning to them. Here is the HTML code:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
  <button type="submit" value="Submit" disabled>Submit</button>
</form>

We will then use jQuery to disable or enable the submit button based on whether there is a string in the name field. We will do this using the length property. If the field is empty we will display a message using the insertAfter() method.

Finally, we will use the focusin() method to clear any previous warning messages so they don’t stack up.

Here is the code:

$("#fname").blur(function(){
  var inputVal = $("#fname").val();
  if( inputVal.length != 0 ){
    //The name field is NOT empty
    $('button').prop('disabled', false);
  } else {
    //The name field IS empty
    $('button').prop('disabled', true);
    $('<p id="no-name" style="color:red;font-size:14px;">Make sure to enter a name!</p>').insertAfter("#fname");
  } 
});

$("#fname").focusin(function(){
  $('#no-name').remove();
});

The final code and output for this example is below.

Make sure to click the form field and click away with nothing in it to see the full example.

Code Output:

Full Code:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
  <button type="submit" value="Submit" disabled>Submit</button>
</form>

<script>

$("#fname").blur(function(){
  var inputVal = $("#fname").val();
  if( inputVal.length != 0 ){
    //The name field is NOT empty
    $('button').prop('disabled', false);
  } else {
    //The name field IS empty
    $('button').prop('disabled', true);
    $('<p id="no-name" style="color:red;font-size:14px;">Make sure to enter a name!</p>').insertAfter("#fname");
  } 
});

$("#fname").focusin(function(){
  $('#no-name').remove();
});

</script>

Hopefully this article has been useful to help you understand how to use the jQuery blur() method.