Detecting autocomplete on form input with jQuery

Question

I have a form that detects if all the text-fields are valid on each keyup() and focus(); if they're all valid, it will enable the submit button for the user to press. However, if the user fills in one of the text inputs with a browsers autocomplete feature, it prevents the submit button from being enabled.

Is there a way to detect if any of the input has changed regardless of how it's been changed, using jQuery?

Answer 1

You could try using on input to detect text-based changes (except keys like ctrl and shift) in <input>'s.

For example:

$(input).on('input', function() { 
    console.log($(this).val()); 
});

Answer 2

The jQuery change event will only fire on blur. The keyup event will fire as you type. Neither fire on clicking an auto-completion option. I am also searching for a way to detect this, but I'm currently going with

$(selector).bind("change keyup",function(){
    //Do something, probably with $(this).val()
});

But it doesn't quite solve the problem...

Answer 3

Myself I used

$(selector).on("change keyup blur input", function() {});

which did the trick in Chrome. input is what made it work for autocomplete.

Answer 4

My issue was detecting auto-fill (via a plugin like lastpass or 1password) as well as the issue described above.

The solution that worked for me was:

$(function(){    
    function validate(){
        if($('#email').val() !== '' && $('#password').val() !== '')
            $('#submit').prop('disabled', false);
        else
            $('#submit').prop('disabled', true);
    }

    // Validate after user input
    $('#email, #password').on('keyup change', validate);

    // Validate on mouse enter of body and login form
    // to catch auto-fills from roboform/1password etc...
    $('body, #loginform').on('mouseenter', validate);

    // Validate onload incase of autocomplete/autofill
    validate();
});

See demo in JSFiddle.

Answer 5

The answer has been given in this question. It doesn't use jQuery, but it works for Autocomplete:

Use js onpropertychange event.

Answer 6

I have a decent solution after having the same problem. Set keyup as normal to our form fields, then mouseover to the surrounding div. So once you click the autocomplete option, you mouse will be over the top of the div:

$("#emailaddress").bind("keyup", function() {
    displayFullSubcribeForm();
});

$(".center_left_box").bind("mouseover", function() {
    displayFullSubcribeForm();
});

Answer 7

I wanted a very good user experience on a field where it would not be invalid (turn red in my case) as long as the user was reasonably active e.g. still filling out the field.

To do this for normal input, I was able to hook up to keyup with a debounce function, while blur is connected for immediate validation. While it appears that keyup is triggered by lastpass, since I have debounced it, there was a delay in validation. Thanks to @peter-ajtai I tried to add the change event and it indeed catches last pass and leaves the other niceties alone.

Coffeescript example:

@fieldExp .keyup($.debounce(@_onExpChange, 3000)) .blur(@_onExpChange) .change(@_onExpChange)

This worked well and lastpass form fill triggers immediate validation.

Answer 8

You could use the jQuery .change() function.

After the page initially loads, you can validate the entire form, just to check that it is in fact not filled in. After that you can use .change() to check if things have changed on the form, and if anything has changed, validate the form again.

$(document).ready(function() {
   // validate form once, just to be sure (if valid, activate submit button)
});
...
<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<script type="text/javascript">     
    $('.target').change(function() {
        alert('Something changed');
        // Try validating form again (if valid, activate submit button)
    });
</script>

---

Plan B

Another option is to always have the submit button clickable, but use .submit() to bind it to the form validator. Then if the form IS valid, carry on. If the form IS NOT valid use .preventDefault() to stop the submission of the form..... and you'd display a warning message too, indicating the missing fields.

Answer 9

this is the ultimate solution, guaranteed to work

$(document).bind('mouseover', function(){
        liveValidate();
    });