如果在使用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;
})