Jquery Validate does not execute the event when fields are autocompleted

Asked

Viewed 321 times

1

I am trying to validate a form without submitting it. What I have done so far works well. The problem is when the browser auto-fill completes the login and password that were saved to the IP. If I delete the auto completed field and give focusOut the event to validate form is not triggered.

I’m using the following :
jquery -validation - 1.15.0
google- Chrome version 49.0.2623.87 (64-bit )

Footsteps :
1 - Create a form and submit this form.
2 - Make browser save this information as the default values for that site.
3 - Return to the form and delete some field "filled automatically" and try to provoke some event so that jquey-validate does the validation.

It should validate the field without the need to submit. In my case it is not triggering the event and the validation is not occurring.

form

<form name="form" id="loginform" class="lm-login-form" method="post" action="./?_task=login">
  <div id="userid" class="lm-login-item">
    <div class="lm-login-label">
      <label for="rcmloginuser"><roundcube:label name="mail" /></label>
    </div>
    <div class="lm-login-field">
      <input name="_user" id="rcmloginuser">
    </div>
  </div>

  <div id="pwdid" class="lm-login-item">
    <div class="lm-login-label">
      <label for="rcmloginpwd"><roundcube:label name="password" /></label>
    </div>
    <div class="lm-login-field">
      <input name="_pass" id="rcmloginpwd" type="password">
      <a href="#" id="showpass">Exibir</a>
    </div>
  </div>

  <p class="formbuttons">
    <input type="submit" id="submitloginform" class="lm-login-submit" value="Entrar">
  </p>
</form>

validation script

$(document).ready(function() {
  $( '#loginform' ).validate({
    rules: {
      _user: {
        required: true,
        email: true
      },
      _pass: {
        required: true
      }
    },
  });
});
  • 2

    Post your code, so it’s hard to see the problem.

  • 1

    @Diego edited the question

  • You can put the part where you call the autocomplete too, please?

  • @Lfziron autocomplete would be the default browser. I don’t implement any. When you submit the form for the first time the broser asks if you want to save login and password, it would be in this case.

  • I’ll try to do something that might solve that problem and put it here.

1 answer

0

When the browser completes the fields automatically, the event that activates the validate is not called. You need to call it manually, try this way:

$(document).ready(function(){
 checkInput = setInterval(function(){
  var autoCompleted = false;
  $("#loginform input").each(function(input){
    input = $("#loginform input").eq(input);
    if($(input).val()){
      $(input).val($(input).val());
      $(input).change();
      autoCompleted = true;
    }
    if(autoCompleted){
      clearInterval(checkInput);
    }
  })
 }, 10);
$("#loginform input").focus(function(){
 $(this).change();
 $(this).val($(this).val());
});
$( '#loginform' ).validate({
  rules: {
   _user: {
     required: true,
     email: true
   },
   _pass: {
     required: true
   }
  },
 });
})
  • It didn’t work. It still doesn’t trigger the event when I delete the autocomplete field for example.

  • I edited the answer to trigger the event when the input is focused, can test again for kindness?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.