字段为空时阻止提交并显示错误消息

Question

我的网站上有很多不同的表格。我想使用 Jquery 来：

• 如果任何文本字段为空，则显示错误消息
• 使用 CSS 突出显示空白字段
• 在用户填写之前阻止提交表单。

所有不同的表单都链接到同一个 Jquery 脚本，因此我必须确保我的 jquery 不会对特定表单进行任何引用（否则，我将不得不为每个表单编写不同的脚本）。

我认为最好的方法是使用each function 循环输入字段以检查它们是否为空白，然后使用event.preventDefault(); 阻止表单提交并使用addClass 突出显示字段.

每个功能都有效，但 preventdefault/addclass 似乎不起作用。我不确定我做错了什么。这是我的代码：（JSFiddle 版本）

$(document).ready(function () {

$('.names').submit(function(){  
          $('.names input[type=text]').each(function(n,element){  
            if ($(element).val()=='') {  
                event.preventDefault();
              alert('Some fields are blank (highlighted in red). Please fill them in');  
              ($element).addClass("error");
              return false;  
            }  
          });  
          return true;  
        });

});

我怎样才能让它工作？是否可以将错误类应用于输入字段的父 <p> 标签而不是字段本身？

Answer 1

event 未定义。在提交回调中捕获参数并在其上调用 preventDefault：

$(document).ready(function () {
    $('.names').submit(function (e) {
        $(this).find('input[type=text]').each(function (n, element) {
            if ($(element).val() == '') {
                e.preventDefault();
                alert('Some fields are blank (highlighted in red). Please fill them in');
                $(element).parent().addClass("error");

                return false;
            }
        });

        return true;
    });
});

注意：

1. ($element) 也未定义，你的意思是$(element)。
2. 要将错误类添加到父类，请使用$(element).parent()。
3. 如果您有多个表单，这将不起作用。使用$(this).find('input[...]') 而不是$('.names input[...]')。这样，您只需验证您提交的表单。
4. 这是working fiddle。