Валидация динамически созданных инпутов

Question

Использую jquery-validate: v1.19.2 (https://jqueryvalidation.org/) Append-им такой блок:

<div class="product-form-template">
        <div class="col-lg-12 text-center font-weight-bold"><h4 class="count-input">#1:</h4></div>
        <div class="form-group">
            <input type="text" class="form-control" name="Product_name[]" placeholder="{{trans('item_name_regpacel_dsc')}}*" required>
        </div>
        <div class="form-row">
            <div class="form-group col-md-3">
                <input type="text" class="form-control" name="Size[]" placeholder="{{trans('size')}}">
            </div>
            <div class="form-group col-md-3">
                <input type="text" class="form-control" name="Color[]" placeholder="{{trans('color')}}">
            </div>
            <div class="form-group col-md-3">
                <input type="text" class="form-control" name="Qty[]" placeholder="{{trans('qty')}}*" required>
            </div>
            <div class="form-group col-md-3">
                <input type="text" class="form-control" name="Price[]" placeholder="{{trans('price')}}*" required>
            </div>
        </div>
    </div>

код полностью:

$(document).ready(function () {
    function updateNumbers() {
        $.each($('.count-input'), function (k, v) {
            $(this).html('#' + k++ + ':')
        });
    }

    function addrow() {
        $('.for-append').append($(".product-form-template").first().html())
        updateNumbers()
    }
    $.validator.setDefaults({
        submitHandler: function() {
            alert(v.form());
        }
    });
    $.validator.addMethod(
        "regex",
        function (value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        }
    );
    let v = $("#regparcelform").validate({
        errorPlacement: function (error, element) {
            return true;
        },
        validClass: "is-valid",
        errorClass: "is-invalid",
        rules: {
            "Tracking": {
                required: true,
                regex: /^(\s)?[A-Za-z0-9.]+(-[0-9]{1,2})?(\s)?$/gm,
                minlength: 8,
                maxlength: 34
            },
            "Warehouse": {
                required: true
            },
            "Product_name[]": {
                required: true,
                regex: /^[A-z0-9\s\-.#,'()/+&:%]+$/gm,
                minlength: 3,
                maxlength: 100
            },
            "Size[]": {
                required: false,
                regex: /^[0-9A-z.,\-/]+$/gm,
                minlength: 1,
                maxlength: 50
            },
            "Color[]": {
                required: false,
                regex: /^[0-9A-z\s\-\/]+$/gm,
                minlength: 1,
                maxlength: 50
            },
            "Qty[]": {
                required: true,
                regex: /^([1-9][0-9]+|[1-9])$/gm,
                minlength: 1,
                maxlength: 5
            },
            "Price[]": {
                required: true,
                regex: /^([1-9][0-9]+|[1-9])((.|,)\d{1,2})?$/gm,
                minlength: 1,
                maxlength: 5
            }
        }
    })
    addrow()

    $('.add-product-input').click(function () {
        addrow()
    })
})

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="robots" content="noindex, nofollow">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Validator</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
    </head>
    <body>
        <div class="container-fluid">
        <div class="product-form-template" hidden>
            <div class="col-lg-12 text-center font-weight-bold"><h4 class="count-input">#1:</h4></div>
            <div class="form-group">
                <input type="text" class="form-control" name="Product_name[]" placeholder="Product name*" required>
            </div>
            <div class="form-row">
                <div class="form-group col-md-3">
                    <input type="text" class="form-control" name="Size[]" placeholder="Size">
                </div>
                <div class="form-group col-md-3">
                    <input type="text" class="form-control" name="Color[]" placeholder="Color">
                </div>
                <div class="form-group col-md-3">
                    <input type="text" class="form-control" name="Qty[]" placeholder="Qty*" required>
                </div>
                <div class="form-group col-md-3">
                    <input type="text" class="form-control" name="Price[]" placeholder="Price*" required>
                </div>
            </div>
        </div>
        <fieldset class="border rounded border-primary">
            <legend class='text-center'>Validator</legend>
            <div class="container-fluid mb-4">
                <form method="post" class="validate" id="regparcelform">
                    <div class="form-group">
                        <input type="text" class="form-control text-uppercase" name="Tracking" placeholder="Tracking*" required>
                    </div>
                    
                    <div class="for-append">
                    </div>
                    <div class="text-center mb-4">
                        <i class="text-success add-product-input btn">+</i>
                    </div>
                    <div class="text-center">
                        <input type="submit" value="submit" id="but_self" class="btn btn-primary">
                    </div>
                </form>
            </div>
        </fieldset>
    </div>
    </body>
</html>

Валидацию проходит только первый блок, как быть с остальными?

БЛОГ НА HUSL

Валидация динамически созданных инпутов

Ответы (0 шт):