inputtypes within a
										formthat has FormValidation attached to it.nameattribute to bind the input field for validation.
// Define form element
const form = document.getElementById('kt_docs_formvalidation_daterangepicker');
// Init daterangepicker --- for more info, please visit: https://www.daterangepicker.com/
element.daterangepicker({
    autoUpdateInput: false,
});
element.on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
element.on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
});
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
    form,
    {
        fields: {
            'daterangepicker_input': {
                validators: {
                    notEmpty: {
                        message: 'Date range input is required'
                    }
                }
            },
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap: new FormValidation.plugins.Bootstrap5({
                rowSelector: '.fv-row',
                eleInvalidClass: '',
                eleValidClass: ''
            })
        }
    }
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_daterangepicker_submit');
submitButton.addEventListener('click', function (e) {
    // Prevent default button action
    e.preventDefault();
    // Validate form before submit
    if (validator) {
        validator.validate().then(function (status) {
            console.log('validated!');
            if (status == 'Valid') {
                // Show loading indication
                submitButton.setAttribute('data-kt-indicator', 'on');
                // Disable button to avoid multiple click
                submitButton.disabled = true;
                // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
                setTimeout(function () {
                    // Remove loading indication
                    submitButton.removeAttribute('data-kt-indicator');
                    // Enable button
                    submitButton.disabled = false;
                    // Show popup confirmation
                    Swal.fire({
                        text: "Form has been successfully submitted!",
                        icon: "success",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, got it!",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    });
                    //form.submit(); // Submit form
                }, 2000);
            }
        });
    }
});
														
<!--begin::Form-->
<form id="kt_docs_formvalidation_daterangepicker" class="form" action="#" autocomplete="off">
    <!--begin::Input group-->
    <div class="fv-row mb-10">
        <!--begin::Label-->
        <label class="required fw-bold fs-6 mb-2">Date Range Picker Input</label>
        <!--end::Label-->
        <!--begin::Input-->
        <input class="form-control form-control-solid" name="daterangepicker_input" placeholder="Pick date range" id="kt_daterangepicker" />
        <!--end::Input-->
    </div>
    <!--end::Input group-->
    <!--begin::Actions-->
    <button id="kt_docs_formvalidation_daterangepicker_submit" type="submit" class="btn btn-primary">
        <span class="indicator-label">
            Validation Form
        </span>
        <span class="indicator-progress">
            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
        </span>
    </button>
    <!--end::Actions-->
</form>
<!--end::Form-->
														
// Define form element
const form = document.getElementById('kt_docs_formvalidation_flatpickr');
// Init flatpickr --- for more info, please visit: https://flatpickr.js.org/
$("#kt_flatpickr").flatpickr();
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
    form,
    {
        fields: {
            'flatpickr_input': {
                validators: {
                    date: {
                        format: 'YYYY-MM-DD',
                        message: 'The value is not a valid date',
                    },
                    notEmpty: {
                        message: 'Flatpickr input is required'
                    }
                }
            },
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap: new FormValidation.plugins.Bootstrap5({
                rowSelector: '.fv-row',
                eleInvalidClass: '',
                eleValidClass: ''
            })
        }
    }
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_flatpickr_submit');
submitButton.addEventListener('click', function (e) {
    // Prevent default button action
    e.preventDefault();
    // Validate form before submit
    if (validator) {
        validator.validate().then(function (status) {
            console.log('validated!');
            if (status == 'Valid') {
                // Show loading indication
                submitButton.setAttribute('data-kt-indicator', 'on');
                // Disable button to avoid multiple click
                submitButton.disabled = true;
                // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
                setTimeout(function () {
                    // Remove loading indication
                    submitButton.removeAttribute('data-kt-indicator');
                    // Enable button
                    submitButton.disabled = false;
                    // Show popup confirmation
                    Swal.fire({
                        text: "Form has been successfully submitted!",
                        icon: "success",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, got it!",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    });
                    //form.submit(); // Submit form
                }, 2000);
            }
        });
    }
});
														
<!--begin::Form-->
<form id="kt_docs_formvalidation_flatpickr" class="form" action="#" autocomplete="off">
    <!--begin::Input group-->
    <div class="fv-row mb-10">
        <!--begin::Label-->
        <label class="required fw-bold fs-6 mb-2">Flatpickr Input</label>
        <!--end::Label-->
        <!--begin::Input-->
        <input class="form-control" name="flatpickr_input" placeholder="Pick a date" id="kt_flatpickr" />
        <!--end::Input-->
    </div>
    <!--end::Input group-->
    <!--begin::Actions-->
    <button id="kt_docs_formvalidation_flatpickr_submit" type="submit" class="btn btn-primary">
        <span class="indicator-label">
            Validation Form
        </span>
        <span class="indicator-progress">
            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
        </span>
    </button>
    <!--end::Actions-->
</form>
<!--end::Form-->
														
// Define form element
const form = document.getElementById('kt_docs_formvalidation_image_input');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
    form,
    {
        fields: {
            'avatar': {
                validators: {
                    notEmpty: {
                        message: 'Please select an image'
                    },
                    file: {
                        extension: 'jpg,jpeg,png',
                        type: 'image/jpeg,image/png',
                        message: 'The selected file is not valid'
                    },
                }
            },
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap: new FormValidation.plugins.Bootstrap5({
                rowSelector: '.fv-row',
                eleInvalidClass: '',
                eleValidClass: ''
            })
        }
    }
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_image_input_submit');
submitButton.addEventListener('click', function (e) {
    // Prevent default button action
    e.preventDefault();
    // Validate form before submit
    if (validator) {
        validator.validate().then(function (status) {
            console.log('validated!');
            if (status == 'Valid') {
                // Show loading indication
                submitButton.setAttribute('data-kt-indicator', 'on');
                // Disable button to avoid multiple click
                submitButton.disabled = true;
                // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
                setTimeout(function () {
                    // Remove loading indication
                    submitButton.removeAttribute('data-kt-indicator');
                    // Enable button
                    submitButton.disabled = false;
                    // Show popup confirmation
                    Swal.fire({
                        text: "Form has been successfully submitted!",
                        icon: "success",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, got it!",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    });
                    //form.submit(); // Submit form
                }, 2000);
            }
        });
    }
});
														
<!--begin::Form-->
<form id="kt_docs_formvalidation_image_input" class="form" action="#" autocomplete="off">
    <!--begin::Input group-->
    <div class="fv-row mb-7">
        <!--begin::Label-->
        <label class="d-block fw-bold fs-6 mb-5">Image Input</label>
        <!--end::Label-->
        <!--begin::Image input-->
        <div class="image-input image-input-outline image-input-empty" data-kt-image-input="true" style="background-image: url('assets/media/svg/avatars/blank.svg')">
            <!--begin::Preview existing avatar-->
            <div class="image-input-wrapper w-125px h-125px"></div>
            <!--end::Preview existing avatar-->
            <!--begin::Label-->
            <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar">
                <i class="bi bi-pencil-fill fs-7"></i>
                <!--begin::Inputs-->
                <input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
                <input type="hidden" name="avatar_remove" />
                <!--end::Inputs-->
            </label>
            <!--end::Label-->
            <!--begin::Cancel-->
            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
                <i class="bi bi-x fs-2"></i>
            </span>
            <!--end::Cancel-->
            <!--begin::Remove-->
            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
                <i class="bi bi-x fs-2"></i>
            </span>
            <!--end::Remove-->
        </div>
        <!--end::Image input-->
        <!--begin::Hint-->
        <div class="form-text">Allowed file types: png, jpg, jpeg.</div>
        <!--end::Hint-->
    </div>
    <!--end::Input group-->
    <!--begin::Actions-->
    <button id="kt_docs_formvalidation_image_input_submit" type="submit" class="btn btn-primary">
        <span class="indicator-label">
            Validation Form
        </span>
        <span class="indicator-progress">
            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
        </span>
    </button>
    <!--end::Actions-->
</form>
<!--end::Form-->
														
// Define form element
const form = document.getElementById('kt_docs_formvalidation_password');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
    form,
    {
        fields: {
            'current_password': {
                validators: {
                    notEmpty: {
                        message: 'Current password is required'
                    }
                }
            },
            'new_password': {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    callback: {
                        message: 'Please enter valid password',
                        callback: function (input) {
                            if (input.value.length > 0) {
                                return validatePassword();
                            }
                        }
                    }
                }
            },
            'confirm_password': {
                validators: {
                    notEmpty: {
                        message: 'The password confirmation is required'
                    },
                    identical: {
                        compare: function () {
                            return form.querySelector('[name="new_password"]').value;
                        },
                        message: 'The password and its confirm are not the same'
                    }
                }
            },
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap: new FormValidation.plugins.Bootstrap5({
                rowSelector: '.fv-row',
                eleInvalidClass: '',
                eleValidClass: ''
            })
        }
    }
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_password_submit');
submitButton.addEventListener('click', function (e) {
    // Prevent default button action
    e.preventDefault();
    // Validate form before submit
    if (validator) {
        validator.validate().then(function (status) {
            console.log('validated!');
            if (status == 'Valid') {
                // Show loading indication
                submitButton.setAttribute('data-kt-indicator', 'on');
                // Disable button to avoid multiple click
                submitButton.disabled = true;
                // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
                setTimeout(function () {
                    // Remove loading indication
                    submitButton.removeAttribute('data-kt-indicator');
                    // Enable button
                    submitButton.disabled = false;
                    // Show popup confirmation
                    Swal.fire({
                        text: "Form has been successfully submitted!",
                        icon: "success",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, got it!",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    });
                    //form.submit(); // Submit form
                }, 2000);
            }
        });
    }
});
														
<!--begin::Form-->
<form id="kt_docs_formvalidation_password" class="form" action="#" autocomplete="off">
    <!--begin::Input group--->
    <div class="fv-row mb-10">
        <label class="required form-label fs-6 mb-2">Current Password</label>
        <input class="form-control form-control-lg form-control-solid" type="password" placeholder="" name="current_password" autocomplete="off" />
    </div>
    <!--end::Input group--->
    <!--begin::Input group-->
    <div class="mb-10 fv-row" data-kt-password-meter="true">
        <!--begin::Wrapper-->
        <div class="mb-1">
            <!--begin::Label-->
            <label class="form-label fw-bold fs-6 mb-2 required">
                New Password
            </label>
            <!--end::Label-->
            <!--begin::Input wrapper-->
            <div class="position-relative mb-3">
                <input class="form-control form-control-lg form-control-solid" type="password" placeholder="" name="new_password" autocomplete="off" />
                <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
                    <i class="bi bi-eye-slash fs-2"></i>
                    <i class="bi bi-eye fs-2 d-none"></i>
                </span>
            </div>
            <!--end::Input wrapper-->
            <!--begin::Meter-->
            <div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
            </div>
            <!--end::Meter-->
        </div>
        <!--end::Wrapper-->
        <!--begin::Hint-->
        <div class="text-muted">
            Use 8 or more characters with a mix of letters, numbers & symbols.
        </div>
        <!--end::Hint-->
    </div>
    <!--end::Input group--->
    <!--begin::Input group--->
    <div class="fv-row mb-10">
        <label class="form-label fw-bold fs-6 mb-2 required">Confirm New Password</label>
        <input class="form-control form-control-lg form-control-solid" type="password" placeholder="" name="confirm_password" autocomplete="off" />
    </div>
    <!--end::Input group--->
    <!--begin::Actions-->
    <button id="kt_docs_formvalidation_password_submit" type="submit" class="btn btn-primary">
        <span class="indicator-label">
            Validation Form
        </span>
        <span class="indicator-progress">
            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
        </span>
    </button>
    <!--end::Actions-->
</form>
<!--end::Form-->
														
// Define form element
const form = document.getElementById('kt_docs_formvalidation_select2');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
    form,
    {
        fields: {
            'select2_input': {
                validators: {
                    notEmpty: {
                        message: 'Select2 input is required'
                    }
                }
            },
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap: new FormValidation.plugins.Bootstrap5({
                rowSelector: '.fv-row',
                eleInvalidClass: '',
                eleValidClass: ''
            })
        }
    }
);
// Revalidate Select2 input. For more info, plase visit the official plugin site: https://select2.org/
$(form.querySelector('[name="select2_input"]')).on('change', function () {
    // Revalidate the field when an option is chosen
    validator.revalidateField('select2_input');
});
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_select2_submit');
submitButton.addEventListener('click', function (e) {
    // Prevent default button action
    e.preventDefault();
    // Validate form before submit
    if (validator) {
        validator.validate().then(function (status) {
            console.log('validated!');
            if (status == 'Valid') {
                // Show loading indication
                submitButton.setAttribute('data-kt-indicator', 'on');
                // Disable button to avoid multiple click
                submitButton.disabled = true;
                // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
                setTimeout(function () {
                    // Remove loading indication
                    submitButton.removeAttribute('data-kt-indicator');
                    // Enable button
                    submitButton.disabled = false;
                    // Show popup confirmation
                    Swal.fire({
                        text: "Form has been successfully submitted!",
                        icon: "success",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, got it!",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    });
                    //form.submit(); // Submit form
                }, 2000);
            }
        });
    }
});
														
<!--begin::Form-->
<form id="kt_docs_formvalidation_select2" class="form" action="#" autocomplete="off">
    <!--begin::Input group--->
    <div class="fv-row mb-10">
        <!--begin::Label-->
        <label class="required form-label fs-6 mb-2">Select2 Input</label>
        <!--end::Label-->
        <!--begin::Select2-->
        <select class="form-select" name="select2_input" data-control="select2" data-placeholder="Select an option">
            <option></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
        <!--begin::Select2-->
    </div>
    <!--end::Input group--->
    <!--begin::Actions-->
    <button id="kt_docs_formvalidation_select2_submit" type="submit" class="btn btn-primary">
        <span class="indicator-label">
            Validation Form
        </span>
        <span class="indicator-progress">
            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
        </span>
    </button>
    <!--end::Actions-->
</form>
<!--end::Form-->
														
// Define form element
const form = document.getElementById('kt_docs_formvalidation_tagify');
// Init tagify --- for more info, please visit: https://yaireo.github.io/tagify/
var tags = new Tagify(document.querySelector("#kt_tagify"), {
    whitelist: ["Tag 1", "Tag 2", "Tag 3", "Tag 4", "Tag 5", "Tag 6", "Tag 7", "Tag 8", "Tag 9", "Tag 10", "Tag 11", "Tag 12"],
    maxTags: 6,
    dropdown: {
        maxItems: 20,           // <- mixumum allowed rendered suggestions
        classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
        enabled: 0,             // <- show suggestions on focus
        closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
    }
});
tags.on("change", function(){
    // Revalidate the field when an option is chosen
    validator.revalidateField('tagify_input');
});
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
    form,
    {
        fields: {
            'tagify_input': {
                validators: {
                    notEmpty: {
                        message: 'Tagify input is required'
                    }
                }
            },
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap: new FormValidation.plugins.Bootstrap5({
                rowSelector: '.fv-row',
                eleInvalidClass: '',
                eleValidClass: ''
            })
        }
    }
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_tagify_submit');
submitButton.addEventListener('click', function (e) {
    // Prevent default button action
    e.preventDefault();
    // Validate form before submit
    if (validator) {
        validator.validate().then(function (status) {
            console.log('validated!');
            if (status == 'Valid') {
                // Show loading indication
                submitButton.setAttribute('data-kt-indicator', 'on');
                // Disable button to avoid multiple click
                submitButton.disabled = true;
                // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
                setTimeout(function () {
                    // Remove loading indication
                    submitButton.removeAttribute('data-kt-indicator');
                    // Enable button
                    submitButton.disabled = false;
                    // Show popup confirmation
                    Swal.fire({
                        text: "Form has been successfully submitted!",
                        icon: "success",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, got it!",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    });
                    //form.submit(); // Submit form
                }, 2000);
            }
        });
    }
});
														
<!--begin::Form-->
<form id="kt_docs_formvalidation_tagify" class="form" action="#" autocomplete="off">
    <!--begin::Input group-->
    <div class="fv-row mb-10">
        <!--begin::Label-->
        <label class="required fw-bold fs-6 mb-2">Tagify Input</label>
        <!--end::Label-->
        <!--begin::Input-->
        <input class="form-control" name="tagify_input" value="" id="kt_tagify" />
        <!--end::Input-->
    </div>
    <!--end::Input group-->
    <!--begin::Actions-->
    <button id="kt_docs_formvalidation_tagify_submit" type="submit" class="btn btn-primary">
        <span class="indicator-label">
            Validation Form
        </span>
        <span class="indicator-progress">
            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
        </span>
    </button>
    <!--end::Actions-->
</form>
<!--end::Form-->