Question

I’ve just started learning jQuery and already love it, but my skills aren’t enough yet to solve this probably simple problem for my work: I have 3 different forms with an input field immediately followed by submit button:

I would like to prevent form submission if the text input field or the textarea before the submit button is empty. I’ve stolen a snippet from the jQuery Ninja book:

$(function() { 
        $(':submit').click(function(e) {
                $(':text').each(function() {
                        if ($(this).val().length == 0) {
                                $(this).css('border', '2px solid red');
                        }
                });
                e.preventDefault();
        });
});

But it has following problems:

1. It ignores the textarea in the last form, because $(':text').each() does not apply to it
2. It doesn’t allow submitting any form – I guess I need to move preventDefault() under an “if”
3. I probably should better use prev() instead of each()
4. If the user changes her mind and clicks another form, the previous form should be cleared

Could someone help me please? Alex

UPDATE:

I’ve tried:

$(function() {
        $(':submit').click(function(e) {
                $(this).prev(function() {
                        if ($(this).val().length < 2) {
                                // would be good to clear border for
                                // each text and textarea here...
                                $(this).css('border', '2px solid red');
                                e.preventDefault();
                        }
                });
        });
});

but unfortunately get 2 warnings:

Warning: Unexpected token in attribute selector: '!'.
Warning: Unknown pseudo-class or pseudo-element 'submit'.

and the red border doesn’t appear and the form is submitted when a button is clicked.

Also I’ve tried:

$(function() {
        $('form').submit(function(e) {
                $(':text, textarea').each(function() {
                        if ($(this).val().length < 2) {
                                $(this).css('border', '2px solid red');
                                e.preventDefault();
                        }
                });
        });
});

but the form is never submitted and all 3 text fields turn red instead of just one.

Answer 1

<script type="text/javascript" src="/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() { 
        $(':submit').click(function(e) {
                $(':text, textarea').each(function() {
                        if ($(this).val().length == 0) {
                                $(this).css('border', '2px solid red');
                                e.preventDefault();
                        }
                });
        });
});
</script>

You’ll probably be ok with .each() 🙂