Documentation v1.0.6

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

Basic Example

Name:

Number:

Primary

Delete

Add

$('#kt_docs_repeater_basic').repeater({
    initEmpty: false,

    defaultValues: {
        'text-input': 'foo'
    },

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

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

<!--begin::Repeater-->
<div id="kt_docs_repeater_basic">
    <!--begin::Form group-->
    <div class="form-group">
        <div data-repeater-list="kt_docs_repeater_basic">
            <div data-repeater-item>
                <div class="form-group row">
                    <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">
                        <label class="form-label">Number:</label>
                        <input type="email" class="form-control mb-2 mb-md-0" placeholder="Enter contact number" />
                    </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-8">
                            <i class="la la-trash-o"></i>Delete
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end::Form group-->

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

Pro Version Benefits	Free	Pro
UI Elements	20	100
In-house Components	20	40
Crafted Pages	5	20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Calendar App
User Management App
Chat App
Customers App

Pro Version Benefits

Free

Pro

UI Elements

100

In-house Components

Crafted Pages

Complete Documentation

Product Support

Layout Builder

Source Vectors

Email Templates

Calendar App

User Management App

Chat App

Customers App

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v1.0.6

Basic Example

Upgrade To Pro

Learn & Get Inspired

Support at devs.keenthemes.com

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v1.0.6

No result found

Basic Example

Upgrade To Pro

Learn & Get Inspired

Support at devs.keenthemes.com