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

これはイベントの伝播が原因であり、イベントは、属性のない( selector によって選択された) 要素に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 に答える