0

好的，所以看看这个

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 属性。我不确定这是否是最方便的方式（欢迎提示），但在这种情况下，我试图获得允许字符的最小数量和最大数量。

如果您查看控制台，除了“Uncaught TypeError: Cannot read property 'length' of undefined”错误之外，一切似乎都运行良好。这很奇怪，因为它甚至不是未定义的。

所以这修复了它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>

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

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

问候

4

1 回答 1

2

这是因为事件传播，keyup事件被传播到没有属性的div（因为选择器而被选中）元素。所以将是未定义的:not([type])patternpattern = 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);
    });
});

演示：小提琴

于 2013-10-19T00:58:41.817 回答