Jquery - .click() is not launched after first attempt

Question

I have a div containing 3 input fields and a button. When the button is clicked, my js launched. My JS checks for input that have empty values and puts them with a red background. Everything working fine. My problem is as follows. Lets imagine the following situation: I just input the the 2 first input fields and click on the button. What will happen is that the third input will become red. Normal. But when I then put some text into that third input and reclick the button it is not switching to red. I don't get it. Hope someone can help. Thank you in advance for youe replies. Cheers. Marc.

http://jsfiddle.net/g3b9S/

My html:

<div id="userList">
    <input type="text" id="user1" class="verif" /><br>
    <input type="text" id="user2" class="verif" /><br>
    <input type="text" id="user3" class="verif" /><br>
    <input type="submit" id="btn" />
</div>

My js:

$('#btn').click(function() {

    var myArray = [];

    var userList = $('#userList .verif');
    userList.each(function() {
        var userID = $(this).attr('id');
        var userName = $(this).val();

        if (!userName) {
            myArray.push({
                'id': userID,
                'name': userName
            });
        }
    });

    $.each(myArray, function(i, v) {
        $('#userList .verif[id=' + v.id + ']').css('background-color', 'red');
    });

});​

Answer 1

You are not removing the background color for valid fields. You can simplify this whole thing into one chained statement:

$('#btn').click(function() {
    $("#userList .verif")
        .css('background-color', "")
        .filter("[value='']")
        .css('background-color', 'red');
});

Example: http://jsfiddle.net/eKwJn/

Answer 2

Because at no point do you ever set the background on the field back to white. Once you change it to red, it simply stays red. Reset the background first like this:

$('input.verif').css('background-color', 'white');

Updated jsFiddle.

Answer 3

When you reach your $.each(... your myArray is empty because none of the textboxes are empty. Reset the background as the first thing you do on that function: http://jsfiddle.net/g3b9S/4/

Answer 4

You need to reset the valid inputs before re-validating. Also, I suggest you use a semantic class instead of inlining the background-color in your JS. That will give you more flexibility in your design later on.

$('#btn').click(function() {
    var userList = $(this).siblings('input.verif');
    // reset to white
    userList.removeClass('invalid');

    // invalidate empty inputs
    userList.each(function() {
        var el = $(this);
        if (el.val()=='') el.addClass('invalid');
    });
});

DEMO: http://jsfiddle.net/Bsywc/

Also, you probably want to add the new HTML5 required attribute on your inputs for automatic in-browser validation. See http://24ways.org/2009/have-a-field-day-with-html5-forms for details