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');
        }
    },

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');
        }
    },

• javascript
• jquery
• node.js

Share Follow asked Jan 16, 2014 at 9:45 Matze IhnseinMatze Ihnsein 5111 silver badge33 bronze badges 1

• 1 This happens a lot with many forms if the fields are pleted with a cached version of information because the event is fired only once and js can't see the changes. – Geo Commented Jan 16, 2014 at 14:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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;

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".