Documentation v8.0.28

Preview Purchase

FormValidation creates an interface to add and remove a repeatable group of input elements. For more info see the official Github repository.

Nested Example

Name:

Number:

Primary

Delete Row

Add Row

JAVASCRIPT
HTML

$('#kt_docs_repeater_nested').repeater({
    repeaters: [{
        selector: '.inner-repeater',
        show: function () {
            $(this).slideDown();
        },

        hide: function (deleteElement) {
            $(this).slideUp(deleteElement);
        }
    }],

    show: function () {
        $(this).slideDown();
    },

    hide: function (deleteElement) {
        $(this).slideUp(deleteElement);
    }
});

<!--begin::Repeater-->
<div id="kt_docs_repeater_nested">
    <!--begin::Form group-->
    <div class="form-group">
        <div data-repeater-list="kt_docs_repeater_nested_outer">
            <div data-repeater-item class="form-group row mb-5">
                <div class="col-md-3">
                    <label class="form-label">Name:</label>
                    <input type="email" class="form-control mb-2 mb-md-0" placeholder="Enter full name" />
                </div>
                <div class="col-md-3">
                    <div class="inner-repeater">
                        <div data-repeater-list="kt_docs_repeater_nested_inner" class="mb-5">
                            <div data-repeater-item>
                                <label class="form-label">Number:</label>
                                <div class="input-group mb-3">
                                    <input type="email" class="form-control" placeholder="Enter contact number" />
                                    <button class="border border-secondary btn btn-icon btn-light-danger" data-repeater-delete type="button">
                                        <i class="la la-trash-o fs-3"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-sm btn-light-primary" data-repeater-create type="button">
                            <i class="la la-plus"></i> Add Number
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-check form-check-custom form-check-solid mt-2 mt-md-11">
                        <input class="form-check-input" type="checkbox" value="" id="form_checkbox" />
                        <label class="form-check-label" for="form_checkbox">
                            Primary
                        </label>
                    </div>
                </div>
                <div class="col-md-4">
                    <a href="javascript:;" data-repeater-delete class="btn btn-sm btn-light-danger mt-3 mt-md-9">
                        <i class="la la-trash-o fs-3"></i>Delete Row
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!--end::Form group-->

    <!--begin::Form group-->
    <div class="form-group">
        <a href="javascript:;" data-repeater-create class="btn btn-light-primary">
            <i class="la la-plus"></i>Add Row
        </a>
    </div>
    <!--end::Form group-->
</div>
<!--end::Repeater-->