CODEWITHSUNDEEP
javascriptjquerynode.js
Matze Ihnsein
Matze Ihnsein

Reputation: 51

browser (chrome, firefox) jquery .val() does not work for autofilled input fields (username, password)

This code is executed to enable a login button only if the length isn't 0 and username and password isn't empty and so on. this works fine. But if i save my login credentials in my browser and i visit the website and see that the fields are prefilled the .val() functions seems not to return a value. if i hit any key the login button is enabled. So the function "Initialize state of login button" seems not to work. Are pre filled fields visible for jquery?

hope you understand me ^^ thank you!

    ready: function() {
        var view = this;
         //setup subViews
        view.setupSubs();
         //Initialize state of login button
        view.onKey();
    },
    "onKey": function(event) {
        var view = this,
            nickname = view.$('#nickname').val(),
            password = view.$('#password').val();

        if (!nickname || !password || nickname.length === 0 || password.length < 8) {
            view.$(':submit').attr('disabled', 'disabled');
        } else {
            view.$(':submit').removeAttr('disabled');
        }
    },

Upvotes: 4

Views: 2905

Answers (2)

Bucket
Bucket

Reputation: 641

N.B. this only covers Chrome.

I recently had a similar issue with a watermarked control. The "value" of autofilled password inputs in chrome appears blank to javascript. I'm assuming this is a security plug of some kind from Google. So you can't get the value in javascript but you can test if there is a value.

Chrome has a CSS selector refinement called -webkit-autofill. You can select on this using JQuery. Which gives us the test:

var hasHiddenValue = view.$('#password:-webkit-autofill').length > 0;

Upvotes: 6

Steini
Steini

Reputation: 2783

Well, it is possible that prefilling the fields in your websits happens via JavaScript. Then you cannot directly read this with a normal event because the document is cached once it is loaded and all changes are not inside this cache.

You should try to use a "on" function that is executed on a refresed version of your document.

Try:

$(document).on( "keyup", "#nickname, #password", function(event) {

});

Edit:

onKey does not exist, wether use: "keydown" or "keyup".

Upvotes: 1

Related Questions