Chrome value on load

Question

I have some problems with the browser Chrome, when it remembers password, username, etc. I cannot check if the input field is empty. I use the following code, but the if statement doesn't work in Chrome while it works in all other browsers.

$(document).ready(function() {    
    $('.inputWithLabel').each(function(){
        if ($(this).val().length != 0){
            var element_id = $(this).attr('id');
            $('label[for="' + element_id + '"]').addClass('inputWithText');
        }
    });
});

I tried to alter the following labels

<form action="" method="post">
    <div class="divInputLabel inputLabel">
        <label class="labelInput" for="username">Brugernavn*</label>
        <input class="inputLabel inputWithLabel" id="username" name="username" type="text">
    </div>
    <div class="divInputLabel inputLabel">
        <label class="labelInput" for="password">Adgangskode*</label>
        <input class="inputLabel inputWithLabel" id="password" name="password" type="password">
    </div>
    <div class="divInputLabel inputLabel">
        <label class="labelInput" for="password_again">Gentag adgangskode*</label>
        <input class="inputLabel inputWithLabel" id="password_again" name="password_again" type="password">
    </div>
    <div class="divInputLabel inputLabel">
        <label class="labelInput" for="first_name">Fornavn*</label>
        <input class="inputLabel inputWithLabel" id="first_name" name="first_name" type="text">
    </div>
    <div class="divInputLabel inputLabel">
        <label class="labelInput" for="last_name">Efternavn</label>
        <input class="inputLabel inputWithLabel" id="last_name" name="last_name" type="text">
    </div>
    <div class="divInputLabel inputLabel">
        <label class="labelInput" for="email">Email*</label>
        <input class="inputLabel inputWithLabel" id="email" name="email" type="text">
    </div>
    <div class="divInputLabel inputLabel">
        <input type="Submit" class="submit-button" value="Registre">
    </div>
</form>

I hope someone can help me.

Well it's not empty if it's prefilled by the browser. What is intended behavior? When page is loaded - do you want to reset all the fields? — Yuriy Galanter, Jul 30 '14 at 13:43
I want to add a class for the label to change layout. The layout will be different, when label is not empty. When I remove the if statement, the function works fine, but all input fields get changed. I just don’t understand why the if statement won’t work in Chrome, but works in all other browsers. — user3805674, Jul 30 '14 at 14:03
Show your markup as well so we can see the structure you're trying to alter. — Palpatim, Jul 30 '14 at 14:24
May be Chrome insert saved user data after some time after load document. Try use timeout to check fields. — CnapoB, Jul 30 '14 at 14:51
I believe Chrome fires `change` event when prefilling form elements. You can try capturing it once to reset the values — Yuriy Galanter, Jul 30 '14 at 16:08
Yuriy Galanter is right, I added this $('.inputWithLabel').change( function(){ var element_id = $(this).attr('id'); $('label[for="' + element_id + '"]').addClass('inputWithText'); }); which works in Chrome. — user3805674, Jul 31 '14 at 12:07

score 1 · Answer 1 · edited May 18 '15 at 06:07

1

To check and see if the input is empty or not you can do something simpler like this.

$(document).ready(function() {
    $(".inputWithLabel").change(function() {
        if ($(this).val() == null || $(this).val() == "") {
            alert("Input is null!");
        } else {
            alert("Input is valid");
        }
    });
});

edited May 18 '15 at 06:07

Mohammad Faisal

5,783
15
70
117

answered Aug 03 '14 at 03:19

Drew Gallagher

746
2
9
18

score 1 · Answer 2 · edited Jul 22 '15 at 02:49

Don't change your code, apply this instead:

$(document).ready(function() {

    $('.inputWithLabel').each(function(){
        if ($(this).val().length != 0 && $(this).val().length != null){
            var element_id = $(this).attr('id');
            $('label[for="' + element_id + '"]').addClass('inputWithText');
        }
    });
});

Only set && $(this).val().length != null after $(this).val().length != 0 and it should run on different browsers. Try it!

score 1 · Answer 3 · edited Aug 15 '14 at 16:04

1

Try the following code:

    $(document).ready(function() {
      $('body .inputWithLabel').each(function(){
        if ($(this).val().length != 0){
          var element_id = $(this).attr('id');
          $('label[for="' + element_id + '"]').addClass('inputWithText');
        }
      });
   });

Just append body i.e $('body .inputWithLabel') in your each loop.

edited Aug 15 '14 at 16:04

Alex Netkachov

13,172
6
53
85

answered Aug 15 '14 at 16:01

Rohan Kulkarni

141
5

score 1 · Answer 4 · answered Sep 16 '14 at 11:18

1

Your Code looks fine... Label does not have .val() .. if we want innertext of label it should be .text() so replace .val() with .text() and it will work hopefully.... Also first append body i.e
$('body .inputWithLabel')

answered Sep 16 '14 at 11:18

Adeel Shekhani

995
1
11
16

score 1 · Answer 5 · answered Nov 14 '14 at 15:43

Try this:

$(document).ready(function() {

    $('.inputWithLabel').each(function() {
        if ($(this).val()) {
            var element_id = $(this).attr('id');
            $('label[for="' + element_id + '"]').addClass('inputWithText');
        }
    });
});

score 1 · Answer 6 · edited May 18 '15 at 06:08

1

You can try it in your site

$('.inputWithLabel').each(function() {
    if ($(this).val() !== null && $(this).val() !== "") {
        var element_id = $(this).attr('id');
        $("#" + element_id).removeClass('inputWithLabel').addClass('inputWithText');
    }
});

edited May 18 '15 at 06:08

Mohammad Faisal

5,783
15
70
117

answered Feb 22 '15 at 18:45

Binh LE

387
5
17

score 1 · Answer 7 · edited Aug 19 '15 at 12:01

1

I'd tried a similar thing. All you have to do is first turn your form id into a jQuery variable,

var $elem = document.getElementById("yourformid").value; //make sure your id has no # symbol
if ($elem > 0) {
    //do stuff
}

that should work.

edited Aug 19 '15 at 12:01

Lucky

16,787
19
117
151

answered Mar 16 '15 at 21:25

Curtis Chong

783
2
13
26

score 1 · Answer 8 · answered Nov 05 '15 at 16:51

There is currently no possibility to detect if the form is filled by the browser autocompletion. Some alternatives I would suggest are:

Disable autocomplete: If you dont need it, this would be an easy solution

<input autocomplete="off">

or on the whole form:

<form autocomplete="off">

Using the change event to detect any change on the field:

$('#username').on('change keyup',function(){
    // to something
});

Here I can imagine to set a class if there is any change on the input field like:

$('#username').on('change keyup',function(){
    $(this).addClass('changed');
});

Or change the name attribute on the submitted field. e.g.: use this as default:

<input class="inputLabel inputWithLabel" id="username" name="usernameAutofill" type="text">

and change it later to this if anything is done with the input:

$('#username').on('change keyup',function(){
    $(this).attr('name', 'username');
});

But before you do any of this ask yourself following questions: Why you want to proof the Fields? What should happen if they are autofilled? What should happen if they are empty? What should happen if they are regulary filled?

Because what solution is the best depends pretty much on what exactly you want to do. If you answer this question we can help you more.

score -2 · Answer 9 · answered Oct 12 '14 at 15:48

-2

try using:

$('').value

or

this.value

or

this.textContent

or

$('').innerHTML

answered Oct 12 '14 at 15:48

score -2 · Answer 10 · edited Mar 13 '15 at 15:35

-2

Your code is checking each input element which HAS some value, not the ones which are empty. Try changing your condition to:

if ($(this).val().length == 0){
...

this would add the class to the empty field label(s).

edited Mar 13 '15 at 15:35

bwegs

3,769
2
30
33

answered Mar 13 '15 at 15:16

Arif Hussain

1
3

Chrome value on load

10 Answers10