Disabled submit with browser autocomplete fields

[daniloef]

When I go to a browser autocomplete form and it's valid, the submit bottom is "disabled". When I clic the "body" or change the field focus it turn enabled, but is disabled in the "first view".

[1000hz]

Hmm, I'll look into it. Thanks.

[Tabishtabby]

I too experience the same bug. I ended up using keyup() ,change() and also check if the input is empty or not, if has value run validation .

[devbas]

Same problem here. Is there already a workaround or a solution?

[1000hz]

Browsers seem to be inconsistent with whether or not they raise input events whenever they autofill forms. If anyone has any ideas on how to get around this, please let me know.

[msmyers]

setTimeout(function() { $('#form').validator('validate'); }, 100);

[pradithahidayat]

I can handle it with this workaround:

    <!--HTML-->
    ...
    <button type="submit" class="btn btn-primary" id="submit-btn">Submit</button>
    ...

    /* JavaScript */
    $(document).ready(function() {
        $("#submit-btn").click(function() {
            $('#form').validator('validate');
        });
    }

[builtwith]

Any solution for this yet? The best thing I've figured out it to just disable the 'disabled' class on buttons in validator.js -

//$btn.toggleClass('disabled', this.isIncomplete() || this.hasErrors())

[shujakewl]

Thanks pradithahidayat it resolve my issue

[irving-caamal]

bro, you can focus and then blur your field in your ajax response, and is gonna validate ,i I had the same problem, but with this easy solution works perfectly :+1:

something like this:

success: function (data) {
            if (data.key == "1") {
                $("#EmpresaInt").empty().html(data.EmpInt); //Emp Interna
                $("#Empresa").empty().html(data.Cliente);
                $("#grupoemp").empty().html(data.Group);
//after load your fields with your response you gonna focus and then blur.

                $("#EmpresaInt").focus();
                $("#EmpresaInt").blur();

                $("#Empresa").focus();
                $("#Empresa").blur();

                $("#grupoemp").focus();
                $("#grupoemp").blur();
            }
        }

No matter the response of your ajax, the validator will load to give you the response.

[rsshilli]

Having spent a couple of hours trying all of these solutions, I can confirm that nothing really works.

The problem is that these solutions work great when the page is loaded the first time, but on reload (ie. hit the refresh button) the password field will be auto-completed by Chrome but appear to be empty using any kind of Javascript logic. Hence bootstrap-validator will display that the field is empty, when it clearly isn't. You can read more here. Here is the bug in Chrome.. It seems there's some kind of security issue here, which is why it's not being fixed.

So my workaround is to disable the styling of a disabled button:

.btn.disabled {
  cursor: auto;
  opacity: 1;
}

Now it looks like they can login, even though javascript reports the password isn't there and the button technically has the disabled classs applied to it. When they click on the login button, Chrome will magically fire all the events it should have done on page load and then the disable class won't be applied inside of your click handler.

Ryan

[FrancisYergeau]

I personally fix it with <button type="submit" onMouseOver="$('#form').validator('validate')" ...>

[rsshilli]

@FrancisYergeau I'm fascinated. I couldn't get this to work because the password says it's not validated. How did you get the password to be "set" in the password field?

[FrancisYergeau]

1st I don't use Chrome I prefer Opera (You said it yourself it's a bug in Chrome nothing you can do here, other than fixing Chrome ;) ) 2nd I use LastPass not the browser feature, more secure and work better.

Cheers, my solution work fine to disable or enable the submit btn when you need it just before click.

PS May be improve cause there is no onMouseOver on a mobile device... I'll come back with something...

[bewards]

Has there been any progress on this issue (for Chrome)?

Bump.

[dunhamjared]

@bewards It seems that this repository is not maintained anymore. The last commit was Mar 16, 2017...