[英]Uncaught TypeError: Cannot read property 'length' of undefined when there is a parent
Alright, so check this out 好吧,所以看看这个
http://jsfiddle.net/J9Tza/ 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>
I'm working on a form validation script and want to use the HTML5 attributes for this. 我正在处理表单验证脚本,并希望使用HTML5属性。 I'm not sure if this is the most handy way (tips are welcome) but in this case I'm trying to get the minimum amount and maximum amount of allowed characters.
我不确定这是否是最方便的方式(欢迎提示),但在这种情况下,我试图获得允许的最小数量和最大数量的字符。
If you look at the console, everything seems to work fine apart from the "Uncaught TypeError: Cannot read property 'length' of undefined" error. 如果你看一下控制台,除了“未捕获的TypeError:无法读取属性'长度'未定义”错误之外,一切似乎都能正常工作。 It is strange since it isn't even undefined.
这很奇怪,因为它甚至没有定义。
So this fixes it http://jsfiddle.net/J9Tza/1/ 所以这解决了它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>
I removed the surrounding element and now it works but without any errors. 我删除了周围的元素,现在它可以工作,但没有任何错误。
How to fix this? 如何解决这个问题? And is there a better way to do this?
还有更好的方法吗? (might be a bit off-topic)
(可能有点偏离主题)
Greetings 问候
it is because of event propagation, the keyup
event is propagated to the div
(which is selected because of the selector :not([type])
) element where there is no pattern
attribute. 这是因为事件传播,
keyup
事件传播到div
(由于选择器:not([type])
而选择,因为没有pattern
属性。 So pattern = that.attr('pattern')
will be undefined 所以
pattern = that.attr('pattern')
将是未定义的
You need to tweak the :not([type])
selector to select only input elements without type
attribute. 您需要调整
:not([type])
选择器以仅选择没有type
属性的输入元素。 But you can combine the [type="text"], :not([type])
selectors to input:text
. 但是您可以将
[type="text"], :not([type])
选择器组合到input:text
。
Also since you are interested in only elements with pattern
attribute you can add it also to the selector 此外,由于您只对具有
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);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.