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

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

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

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

我认为最好的方法是循环输入字段，检查它们是否为空，然后使用停止表单提交并突出显示字段

每个函数都可以工作，但preventdefault/addclass似乎不能工作。我不确定我做错了什么。这是我的代码：（版本）

---

我怎样才能让它工作？还可以将错误类应用于输入字段的父

标记，而不是字段本身吗？

事件

未定义。捕获submit回调中的参数，并对其调用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;
    });
});

请注意：

（$element）

也是未定义的，您的意思是

$（element）

要将错误类添加到父级，请使用

$（element）.parent（）

如果您有多个表单，这将不起作用。使用

$（this.find（'input[…]）

而不是

$（'.names input[…]）

。这样，您只需验证您提交的表单

这是一本书

---

您可以执行以下

if（！$（element）.val（）{

这将检查是否有空的value@alexn除了它只高亮显示第一个空白字段外，其他都可以。是否可以高亮显示所有空白字段？我想我可以通过将addClass下移并更改选择器使其工作（请参见：），但当我这样做时，什么都不会突出显示！@alexn研究之后，我认为我需要使用filter（）；突出显示所有的空字段（）。我已经尝试过了，但我不能完全让它工作：。我很感激任何指针！谢谢！你所做的几乎所有事情都可以用jQuery.validate插件完成。为什么要重新发明轮子？

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