0

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

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

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

我认为最好的方法是让每个函数循环遍历输入字段以检查它们是否为空白，然后使用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>输入字段的父标签而不是字段本身？

4

1 回答 1

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. 这是一个工作小提琴。
于 2012-10-25T17:54:06.337 回答