Question

Possible Duplicate:
empty field validation in jquery

I need to detect if a form is empty or not. I’ve already client side validation, with mandatory fields and not mandatory, when there is one mandatory field or more, and this is (these are) empty, post button launches client-side validation errors, and this is fine. When they all aren’t mandatory i just need to disable the post button till I insert a value, enabling the post button when i write something. But if i delete the values, i can’t detect if the form is empty or not to re-disable the button!

$('#form .my_field').each(function() {
    $(this).data('oldVal', $(this).val());

    $(this).bind("propertychange keyup input paste change blur", function(event) {
        if ($(this).data('oldVal') != $(this).val()) {
            $('#post_button').button({
                disabled: false
            });
        }
    });
});

with this bind i can detect when i write in a casual form field, but i’ve no clues how to find if every field is clean. I’ve tried many roads, but they lead me to dead end. Maybe is a 10-hours programming issue 🙂 I’ve tried some kind of

 if ($(this).val()=='')

, but for some fields (datapicker for example) does not work (i can have too multiselects —-> :option selected)

I suppose i’ve to bind to the same events to a (if empty set a boolean flag) and check all the boolean flags to determine if they’re all true (or false)..any hints?

Answer 1

Why not just use an else if?

Demo: http://jsfiddle.net/dfAtX/

jQuery:

$('#form .my_field').each(function() {
    $(this).data('oldVal', $(this).val());

    $(this).bind("propertychange keyup input paste change blur", function(event) {

        if ($(this).data('oldVal') != $(this).val()) {
            $('#post_button').button({
                disabled: false
            });
        }
        else if ($(this).val() == $(this).data('oldVal')) { // Don't even bother checking the rest if this doesn't match
            var unchanged = 0;
            $('#form .my_field').each(function() {
                if ($(this).val() == $(this).data('oldVal')) {
                    unchanged++;
                }
            });

            if (unchanged == $('#form .my_field').length) {
                $('#post_button').button({
                    disabled: true
                });
            }
        }
    });
});​