如果在使用jquery的.each()函数迭代每个表单元素后validation失败,则阻止表单提交

我有以下代码,其中我试图迭代html文本输入元素,做一些validation并在validation失败时阻止表单提交:

$("#the_form").submit(function(){ $(":text", this).each(function(){ if($(this).val().length != 0) { var str = $(this).val(); str = $.trim($(this).val()); $(this).val(str); if($(this).val().length < 4) { alert("You should enter at least 4 characters"); $(this).focus(); return false; } } }) // end of each() function return true; }) 

如果我删除.each()函数并单独执行每个元素(这显然不是一个非常好的方法),我得到了想要的结果。 但是,如果我按原样使用代码,即使用户没有输入四个字符,表单也会继续提交。 关于我在这里做错了什么的任何想法? 任何帮助将非常感谢。 提前致谢。

你的return false; 来自$.each()的回调函数(这使得它在该迭代中断)而不是来自submit处理程序(这将停止表单提交)。 这应该是诀窍:

 $("#the_form").submit(function(){ var isValid = true; $(":text", this).each(function(){ if($(this).val().length != 0) { var str = $(this).val(); str = $.trim($(this).val()); $(this).val(str); if($(this).val().length < 4) { alert("You should enter at least 4 characters"); $(this).focus(); isValid = false; return false; } } }) // end of each() function return isValid; }) 

简单…如果您希望它停止,您只需阻止事件的默认值。 请不要退货。 从事件中返回false就像是说:“我希望你失败。我不仅要确保在我之后注册的任何事件处理程序都没有被执行,并且没有冒泡,因为有些狗屎出错了”。 您希望“阻止浏览器正常发生的操作”。

 $("#the_form").submit(function(e) { // LOGIC $(this).find(":text").each(function() { // OH NOES! We detected the form cannot be submitted. e.preventDefault(); // More logic? maybe a shortcut exit.? }); }); 

注意e.preventDefault()将阻止链接进入其href目标,将阻止表单提交,甚至会阻止更改处理程序允许更改(例如复选框事件上的e.preventDefault())。 见http://api.jquery.com/event.preventDefault/

编辑:请注意,事件处理程序始终作为参数传递事件对象,在您忽略它的代码中。 阅读事件处理函数。 你可以用jquery中的事件做一些非常漂亮的function,不要因为它们非常有用而特别是当你需要将一些数据传递给处理程序时。