驗證動態輸入字段jQuery

Question

我正在將動態輸入字段添加到Web表單。 我正在使用此Jquery Mask插件驗證這些。

它可以在初始輸入上正常工作，但不能動態添加。

我輸入的HTML是；

<input type="text" id="mac_address" name="MacAddress[]">

我的按鈕HTML是；

<button class="add-mac" type="button" title="Add">Add</button>

用於驗證輸入的語法為（僅適用於第一個輸入）；

$('#mac_address').mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
    translation: {
        'Z': {
            pattern: /[A-Fa-f0-9]/,
            optional: false,
        }
    }
});

如何將此驗證添加到動態輸入中？

我嘗試將代碼添加到each循環中，盡管它不起作用。

$('.add-mac').click(function() {
    $('#mac_address').each(function() {
        $(this).mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
            translation: {
                'Z': {
                    pattern: /[A-Fa-f0-9]/,
                    optional: false,
                }
            }
        });
    });
});

任何建議表示贊賞。

Answer 1

將類添加到輸入

  <input type="text" class="mac_address" id="mac_address" name="MacAddress[]">
    <button class="add-mac" type="button" title="Add">Add</button>

    <script>
    var count = 1;
    $('.add-mac').click(function() {

     $('.mac_address').last().clone().attr('id', 'mac_address' + count).val('').insertBefore($(this));
    count ++; 
    });
    $(document).on('keyup', '.mac_address', function(){
      $('.mac_address').mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
        translation: {
            'Z': {
                pattern: /[A-Fa-f0-9]/,
                optional: false,
            }
        }
    });
    })
      $('.mac_address').mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
        translation: {
            'Z': {
                pattern: /[A-Fa-f0-9]/,
                optional: false,
            }
        }
    }); 
</script>

https://codepen.io/vommbat/pen/MBXeoj

Answer 2

將ID更改為class

<input type="text" class="mac_address" name="MacAddress[]">
<button class="add-mac" type="button" title="Add">Add</button>

<script>
$('.add-mac').click(function() {
    $('.mac_address').each(function() {
        $(this).mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
            translation: {
                'Z': {
                    pattern: /[A-Fa-f0-9]/,
                    optional: false,
                }
            }
        });
    });
});
</script>