jQuery：如果提交按钮之前的字段为空，则阻止表单提交

Question

我刚刚开始学习 jQuery 并且已经爱上了它，但我的技能还不足以解决我的工作中这个可能很简单的问题：我有 3 种不同的表单，其中有一个输入字段，紧随其后的是提交按钮：

如果提交按钮之前的文本输入字段或文本区域为空，我想阻止表单提交。我从jQuery Ninja book偷了一个sn-p：

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

但它存在以下问题：

1. 它忽略了最后一种形式的文本区域，因为$(':text').each()不适用于它
2. 它不允许提交任何表单 - 我想我需要将 preventDefault() 移动到“如果”下
3. 我可能应该更好地使用prev() 而不是each()
4. 如果用户改变主意并单击另一个表单，则应清除之前的表单

有人可以帮帮我吗？亚历克斯

更新：

我试过了：

$(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();
                        }
                });
        });
});

但不幸收到 2 个警告：

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

并且没有出现红色边框，并且在单击按钮时提交了表单。

我也试过了：

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

但表单从未提交，并且所有 3 个文本字段都变为红色，而不仅仅是一个。

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>

.each() 你可能会没事的 :)

Answer 2

点击进入提交按钮的代码

 $(":input").bind("click keypress", function (evt) {

     var keyCode = evt.which || evt.keyCode;
     var sender = evt.target;
     if (keyCode == 13 || sender.type == "submit") {
         evt.preventDefault();

         //add your validations here
     }

并提交表单。

Answer 3

1. 因为(':text') is equivalent to $('[type=text]') 所以它不包括textarea。改为$(':text, textarea')。
2. 正确

3. 不，prev 不会遍历集合，each 会。 （prev 选择当前元素的上一个兄弟）

4. 看看http://bassistance.de/jquery-plugins/jquery-plugin-validation/，它是一个很棒的验证插件。