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

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。