Question

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

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

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

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

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

$(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未定义。在submit-callback中捕获参数并在其上调用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[...]')。这样，您只需验证要提交的表单。
这是working fiddle。

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

1 个答案: