未捕获的类型错误:当存在父级时，无法读取未定义的属性“长度”

Uncaught TypeError: Cannot read property 'length' of undefined when there is a parent

本文关键字：读取 未定义 属性 长度 类型 错误 存在      更新时间：2023-09-26

好的，所以看看这个

http://jsfiddle.net/J9Tza/

<form class="validation">
<div>
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" pattern=".{3,200}" title="3 to 200 characters" required="required">
    </div>
</form>

我正在开发表单验证脚本，并希望为此使用 HTML5 属性。我不确定这是否是最方便的方法（欢迎提示），但在这种情况下，我正在尝试获得允许字符的最小数量和最大数量。

如果您查看控制台，除了"未捕获的类型错误：无法读取未定义的属性'长度'"错误之外，一切似乎都正常。这很奇怪，因为它甚至不是未定义的。

所以这可以修复它 http://jsfiddle.net/J9Tza/1/

<form class="validation">
    <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" pattern=".{3,200}" title="3 to 200 characters" required="required">
</form>

我删除了周围的元素，现在它可以工作，但没有任何错误。

如何解决这个问题？有没有更好的方法可以做到这一点？（可能有点跑题了）

问候

由于事件传播，keyup事件被传播到没有pattern属性的div（由于选择器 :not([type]) ）元素而被选中。所以pattern = that.attr('pattern')将是未定义的

您需要调整:not([type])选择器以仅选择没有type属性的输入元素。但是您可以将[type="text"], :not([type])选择器组合到 input:text .

另外，由于您只对具有pattern属性的元素感兴趣，因此也可以将其添加到选择器中

$('form.validation').find('input:text[pattern], input[type="email"][pattern], input[type="password"][pattern]').each(function () {
    $(this).on('keyup', function () {
        var that = $(this),
            pattern = that.attr('pattern');
        console.log(this, pattern)
        pattern_array = pattern.substr(2, pattern.length - 3).split(','),
        min_characters = pattern_array[0],
        max_characters = pattern_array[1];
        console.log(min_characters);
    });
});

演示：小提琴

相关文章：