如果在使用jquery的.each（）函数迭代每个表单元素后验证失败，则阻止表单提交

Question

我有以下代码，我正在尝试迭代html文本输入元素，做一些验证并在验证失败时阻止表单提交：

$("#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（）函数并单独执行每个元素（这显然不是一个非常好的方法），我得到了想要的结果。 但是，如果我按原样使用代码，即使用户没有输入四个字符，表单也会继续提交。 关于我在这里做错了什么的想法？ 任何帮助将非常感激。 提前致谢。

Answer 1

你的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;
})

Answer 2

简单...如果您希望它停止，您只需阻止事件的默认值。 请不要退货。 从事件中返回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中的事件做一些非常好的功能，不要因为它们非常有用而特别是当你需要将一些数据传递给处理程序时。