Validate Dynamic Input Fields Jquery

Question

I'm adding dynamic input fields to a web form. I'm validating these using this Jquery Mask plugin.

It works fine on the initial input, but not the ones added dynamically.

My input HTML is;

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

My button HTML is;

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

The syntax used to validate the input is (works on first input only);

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

How can I add this validation to the dynamic inputs?

I have tried adding the code to a each loop although it doesn't work.

$('.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,
                }
            }
        });
    });
});

Any advice is appreciated.

You can't/shouldn't use same id to multiple elements in a single page — Jai
– Jai, Commented Aug 3, 2018 at 12:12
$('#mac_address').each(function() { does not make any sense. There can only be one DOM element with the ID "mac_address" on the page. — Carsten Massmann
– Carsten Massmann, Commented Aug 3, 2018 at 12:13

vommer · Accepted Answer · 2018-08-03 13:37:29Z

1

Added class to input

  <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

edited Aug 3, 2018 at 13:37

answered Aug 3, 2018 at 12:31

vommer

1237 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marin Vartan · Accepted Answer · 2018-08-03 12:22:44Z

0

change the id to 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>

answered Aug 3, 2018 at 12:22

Marin Vartan

5927 silver badges17 bronze badges

Collectives™ on Stack Overflow

Validate Dynamic Input Fields Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related