追加フォームへのバリデーションが動作しない

Question

https://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove

上記サイトを参考にしてフォーム追加の処理を実装しました。

■変更前

<div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div>

上記の箇所に pattern="[^/,/]*" を追加し、「,」の入力を禁止させました。

■変更後

<div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" pattern="[^\/,/]*" placeholder="Type something" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div>

デフォルトで表示されているフォームには正常に制御されたのですが、追加されたフォームには制御がかかりませんでした。
原因をご教示お願い致します。

Answer 1

pattern="[^/,/]*" を追加し、「,」の入力を禁止させました。

pattern="[^,]*"

ではないですか？
ちなみにパターンマッチで失敗してもinputは追加されてよいのですよね？
であれば追加したものでも稼働すると思いますが

Comments

[citra]

>ちなみにパターンマッチで失敗してもinputは追加されてよいのですよね？
inputには追加されて大丈夫です。

pattern="[^,]*"　へと修正してみましたが、やはり追加されたフォームには制御がかかりませんでした。

[yambejp]

参考サイトのJS
newIn = '<input ・・・

の新しいinputの方にpatternをつけていますか？

[citra]

JSのほうへのpattern追加が抜けていました。
解決できました！ありがとうございます。