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.
- Removed autofocus from the login form.
- Checked all the functions which can trigger blur or focus events (there are none).
- Removed all code from jQuery except the above blur function and kept both forms (login and signup) on the page.
- Removed autocomplete="new-password" from login form and added to register form.
- Changed #signInFormId input[name=email],#formId input[name=email] with input ids (email_signup, signIn_email).
- Tried using e.preventDefault();
- 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 ?