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

87 views Asked by At

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

});​
4

There are 4 answers

0
Andrew Whitaker On BEST ANSWER

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/

0
j08691 On

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.

0
MilkyWayJoe On

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/

0
Jens Roland On

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