jQuery类选择器验证可运行但报“无法读取null的length属性”错误

错误根源 #

兄弟，这个报错的核心原因很明确：你在尝试读取**null的length属性**！

为什么会出现null？因为你的代码里用$(this).find('.required')遍历所有带.required类的元素，但这里面很可能混入了非表单输入元素（比如加了.required类的<div>、<span>之类）。jQuery的.val()方法对非表单元素调用时会返回null，你直接去读null.length，浏览器自然会给你抛TypeError。

至于为什么填完所有输入后报错会停止？其实不是真的停止了，而是当所有必填输入框都有内容后，你的show变量会被设为true，后续的逻辑可能掩盖了报错（或者浏览器控制台的错误提示被新的日志刷掉了），但本质上只要页面里存在非表单的.required元素，这个隐患就一直存在。

修复方案 #

给你两个层级的修复，从治标到治本：

1. 紧急治标：先判断val()是否有效

在读取length之前，先检查val()是不是null或者空字符串，避免直接访问不存在的属性：

$(document).ready(function () {
    var counter=0; 
    $('body').on('input', function(){ 
        var show = true; 
        $(this).find('.required').each(function(i){ 
            // 先判断val是否存在且不为空
            if(!$(this).val()){ 
                show = false; 
            }; 
        }); 
        if(show){ 
            if(counter<=0){ 
                // 这里放你原来的逻辑，比如启用提交按钮
                console.log('所有必填项已填完');
                counter++;
            }
        } else {
            counter = 0;
        }
    });
});

!$(this).val()会同时覆盖val()为null（非表单元素）和val()为空字符串（输入框没内容）的情况，一举两得。

2. 彻底治本：只校验表单输入元素

更严谨的做法是，直接限定只遍历表单输入类元素（input、textarea、select等），从根源上避免非表单元素被纳入校验：

$(document).ready(function () {
    var counter=0; 
    // 优化：把事件直接绑定到必填输入框上，减少不必要的触发
    $('body').on('input', '.required:input', function(){ 
        var show = true; 
        // 只筛选表单输入元素
        $('.required:input').each(function(i){ 
            if(!$(this).val()){ 
                show = false; 
            }; 
        }); 
        if(show){ 
            if(counter<=0){ 
                console.log('所有必填项已填完');
                counter++;
            }
        } else {
            counter = 0;
        }
    });
});

这里用:input选择器可以精准匹配所有表单输入元素，同时把事件绑定从body缩小到.required:input，性能也会更好。

额外小建议 #

自学jQuery的话，以后遇到这类报错，第一时间看控制台的错误栈，定位到具体哪一行代码出问题——比如这个报错会直接指向if($(this).val().length==0)这一行，你就可以打印$(this).val()看看是什么值，很快就能找到问题啦！

内容的提问来源于stack exchange，提问作者CoderChris