jQuery empty input check function not working as expected

Question

This question has been done to death on SO and I'm really, really sorry! I've already taken the bones of the below idea from a couple of SO questions on the same theme.

All said though, I still can't get it to work as expected.

It works OK if NONE are filled in.
It works OK if the END input is filled in and not the others.
It works OK if the MIDDLE input is filled in.
If you fill in ONLY the FIRST input though, it alerts, but submits anyway?

JSFIDDLE

$(document).ready(function (e) {
    // completed count submit handler
    $("#submit_counts_button").on('click', function () {
        window.incomplete = false;
        $('input[type=number]').each(function () {
            if ($(this).val().length == 0) {
                window.incomplete = true;
                alert('Some fields are empty');
                return false;
            } else {
                if (window.incomplete === false) {
                    $("#submit_counts_button").prop('disabled', true);
                    $("#submit_counts_button").html('Please Wait ...');
                    //$("#update_form").submit();
                }
            }
        });

    });
});

I'm sure it's something totally embarrassingly obvious but after a 16 hour day, I just can't see it. Any help appreciated ...

Inside each() it iterates over the elements, so if an input without a value is encountered it goes to the first part in the condition, and the return false is returning to each() so the iteration stops. If the first element encountered has a value, it continues to the else part of the condition and submits the form, regardless of what the other inputs contain, so the entire concept is flawed. — adeneo
– adeneo, Commented Jun 26, 2014 at 19:58
@adeneo With a head full of "how it should be done" (accepted answer), I can absolutely see the error of my ways now. Your explanation makes perfect sense. :) — Lee S
– Lee S, Commented Jun 26, 2014 at 20:00

Kaizen Programmer · Accepted Answer · 2014-06-26 19:47:44Z

1

You need to pull the 'incompletion' check outside of the .each

$(document).ready(function (e) {
    // completed count submit handler
    $("#submit_counts_button").on('click', function () {
        window.incomplete = false;
        $('input[type=number]').each(function () {
            if ($(this).val().length == 0) {
                window.incomplete = true;
                alert('Some fields are empty');
                return false;
            }
        });

        if (window.incomplete === false) {
            $("#submit_counts_button").prop('disabled', true);
            $("#submit_counts_button").html('Please Wait ...');
            //$("#update_form").submit();
        }
    });
});

http://jsfiddle.net/6WpeF/6/

answered Jun 26, 2014 at 19:47

Kaizen Programmer

3,8181 gold badge16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lee S Over a year ago

shakes head in despair I said it was going to be embarrassingly obvious ... I think I should put the keyboard down for the day. THANK YOU Michael_B.

Lee S Over a year ago

Wow. That's so much tidier. And considerably more logical, too. Thank you very very much for taking the time; I really appreciate it. Works like a charm!

Lee S Over a year ago

Will accept this answer shortly ... 5 more minutes apparently.

ThatGuy343 · Accepted Answer · 2014-06-26 19:46:50Z

0

try

if(document.getElementById('id of input').value != ""){}

answered Jun 26, 2014 at 19:46

ThatGuy343

2,4343 gold badges33 silver badges56 bronze badges

1 Comment

Austin Mullins Over a year ago

Please elaborate on your answer. How does this solve the OP's problem?

Collectives™ on Stack Overflow

jQuery empty input check function not working as expected

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related