STOP Google Autofill/AutoComplete from ruining my form, Disable autofill on form

Question

I have a form with an input field:

<input id="postalCode" placeholder="Postal Code* (A0A 0A0)" autocomplete="off">

I was using my own custom autocomplete here which google autofill COVERS and ruins the validation and user experience in my form.

I have tried changing the id to something random id="ASDf" and still google infers the field type by the validation or placeholder. I have tried the autocomplete="off" and "false". Neither do anything. On this page:

https://www.canadapost.ca/cpotools/apps/fpc/personal/findAnAddress?execution=e1s1

They have successfully disabled it somehow.

I have tried everything from this page:

Disabling Chrome Autofill

And nothing works.

Answer 1

Ok this worked for me:

role="presentation" autocomplete="nope" 

tested on Chrome Version 64.0.3282.186 (Official Build) (64-bit).

I had to add both of those to each input in question. I also added to the form tag. For this specific version of Chrome the autofill is disabled. I am leaving this here because this is a real pain and ALL the up front solutions in other posts DO NOT work.

Answer 2

Solution : Replace 'Name' with your #id.

  $('#Name').on('mouseup keyup', function () {
        var val = $('#Name').val();
        val = val.length;
        if (val === 0) {
            $('#Name').attr('autocomplete', 'on');
        }
        else {
            $('#Name').attr('autocomplete', 'new-password');
        }
    }).on('mousedown keydown', function () {
        var val = $('#Name').val();
        var length = val.length;
        if (!length) {
            $('#Name').attr('autocomplete', 'new-password');
        }
    })