jQuery Blur Event

The blur event runs when a focused element loses focus. It is often used for lightweight validation after the user leaves a field.

Syntax Top ↑

$( selector ).on( "blur", function (event) {
    // The element has lost focus.
});

Check Required Fields After Blur Top ↑

$( function () {
    $( "#t1" ).on( "blur", function () {
        const value = $( this ).val().trim();
        if ( value.length === 0 ) {
            $( "#d1" ).text( "Please enter your name" );
        }
    });

    $( "#t2" ).on( "blur", function () {
        const value = $( this ).val().trim();
        if ( value.length === 0 ) {
            $( "#d1" ).text( "Please enter your email" );
        }
    });
});

Open the blur-event demo →

Use focus for entry guidance and blur for checks that should happen when the user leaves the control.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: