JQuery not triggering on focusout

Question

I run a business web site and am trying on the client side to prevent certain free email addresses from not registering on my site (server side will be dealt with separately). I have looked at a few posts and came across the answer of skinsey on https://stackoverflow.com/a/8277306/857629.

The only real changes that I have to make to the code are for the check to be triggered on focusout of the input box and then to show a message and clear the input box.

I am very new to JQuery and cannot figure out why the below code isn't triggering when the input box loses focus.

The element in question is:

<input type="email" name="email" id="inputEmail" placeholder="your contact email">

My JQuery is as follows:

jQuery('#inputEmail').focusout(function(){

    // Get the email value from the input with an id="inputEmail"
    var email_addr = jQuery('#inputEmail').val();

    // The regex to check it against
    var re = '[a-zA-Z_\.-]+@((hotmail)|(yahoo)|(gmail)|(outlook)|(protonmail)|(aol))\.[a-z]{2,4}';

    // Check if the email matches
    if(email_addr.match(re)){
        // Email is on the filter list
        // Return false and don't submit the form, or do whatever
        jQuery('#inputEmail').value = "";
        jQuery('#inputEmail').append("<div>To prevent SPAM, free email addresses are no longer accepted on registration. Please enter a valid coorporate email address.</div>");
        
        return false;
    } else {
        // Email ok
        // Allow the form to be submitted
        return true;
    }
});
</script>

I have a feeling that I am missing something simple.

Any help would be highly appreciated.

Answer 1

You can try this

$('#inputEmail').on( "focusout", function(){
console.log('Focus Removed')
} );