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

Question

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

如果文本输入字段或提交按钮前的textarea为空，我想阻止表单提交。我从jQuery Ninja book：

中偷了一个片段

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

但它存在以下问题：

1. 它忽略了最后一种形式的textarea，因为$(':text').each()不适用于它
2. 不允许提交任何表格 - 我想我需要将preventDefault()移到“if”下
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/，这是一个很棒的验证插件。