Blur function in jQuery called repeatedly multiple times with autocomplete password on in browser

Question

I have following blur function in jQuery which is repeatedly called itself on page load (In all browsers.)

Chrome : Version 63.0.3239.84
Firefox : Version 57.0.2

Following is the jQuery code.

$(document).on('blur','#signInFormId input[name=email],#formId input[name=email]',function(e){
        var formData        = {};
        formData.email = email;
        $.ajax({
            method:'POST', 
            url: AJAX_URL,
            dataType:'json',
            data:formData,
            success:function(response){
                console.log(response);
            }
        });     
});

I have login and register forms in modal as follows.
Login form:

<form id="signInFormId" >
    <div class="email">
        <div class="header">Email Address</div>
        <input type="email" name="signIn_email" id="signIn_email" placeholder="Email Address" value="" autofocus />     
    </div>
    <div class="container">
        <div class="header">Password</div>
        <input type="password" name="signIn_password" autocomplete="new-password" id="signIn_password" placeholder="Password" />         
    </div>
</form>

Signup Form :

<form id="formId" action="javascript:void(0);">
    <div class="first-name">
        <div class="header">First Name</div>
        <input type="text" id="first_name" name="first_name" placeholder="" value=""/>

    </div>
    <div class="last-name">
        <div class="header">Last Name</div>
         <input type="text" id="last_name" name="last_name" placeholder="" value=""/>                       
    </div>
    <div class="container">
        <div class="header">Email Address</div>
        <input type="email" id="email_signup" name="email" placeholder="" value=""/>        
    </div>
    <div class="container">
        <div class="header">Password</div>
        <input type="password" id="password" name="password" placeholder="password" value=""  />                        
    </div>
    <a onclick="registerFunction()" href="javascript:void(0);"><div class="button">Signup</div></a>

</form>

Following are the cases which I have tried and issue is reproducible.

1. Removed autofocus from the login form.
2. Checked all the functions which can trigger blur or focus events (there are none).
3. Removed all code from jQuery except the above blur function and kept both forms (login and signup) on the page.
4. Removed autocomplete="new-password" from login form and added to register form.
5. Changed #signInFormId input[name=email],#formId input[name=email] with input ids (email_signup, signIn_email).
6. Tried using e.preventDefault();
7. Removed javascript:void(0); from form action.

The issue is not reproducible in the below case.

Disabled autocomplete of browser or added autocomplete=”new-password”
(note : autocomplete=”off” or false is ignored by browser ).

But I don't want to set autocomplete off for the forms.

Can anybody suggest me a way to stop multiple blur events getting triggered with autocomplete on ?

Answer 1

You can add a boolean to prevent multiple blur :

var isBlur= false;
$(document).on('blur','#signInFormId input[name=email],#formId input[name=email]',function(e){
    if(!isBlur){
        isBlur = true;
        var formData        = {};
        formData.email = email;
        $.ajax({
            method:'POST', 
            url: AJAX_URL,
            dataType:'json',
            data:formData,
            success:function(response){
                console.log(response);
            }
        });
    } 
});