Logo Logo

Documentation v1.0.0

  • Home
  • FormValidation
  • Advanced
Preview
Light
Dark
System
FormValidation is one of the best validation library for JavaScript. For more info see the official siteand the Github repository.

Overview

Here's an example of multiple advanced input types within a form that has FormValidation attached to it.
All input types require the name attribute to bind the input field for validation.
FormValidation is best used together with our integrated SweetAlert2. For more info, please visit the official website.

Form Validation

For more information on Tagify, please visit the official website.
Delete
Add 
// Define form element
const form = document.getElementById("kt_docs_repeater_form");

// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
    form,
    {
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap: new FormValidation.plugins.Bootstrap5({
                rowSelector: ".fv-row",
                eleInvalidClass: "",
                eleValidClass: ""
            }),
            excluded: new FormValidation.plugins.Excluded({
                excluded: function (field, ele, eles) {
                    if (form.querySelector('[name="' + field + '"]') === null) {
                        return true;
                    }
                },
            }),
        }
    }
);

const addFields = function(index) {
    const namePrefix = "data[" + index + "]";

    // Add validators
    validator.addField(namePrefix + "[name]", {
        validators: {
            notEmpty: {
                message: "Text input is required"
            }
        }
    });

    validator.addField(namePrefix + "[email]", {
        validators: {
            emailAddress: {
                message: "The value is not a valid email address"
            },
            notEmpty: {
                message: "Email address is required"
            }
        }
    });

    validator.addField(namePrefix + "[primary][]", {
        validators: {
            notEmpty: {
                message: "Required"
            }
        }
    });
};

const removeFields = function(index) {
    const namePrefix = "data[" + index + "]";

    validator.addField(namePrefix + "[name]");
    validator.addField(namePrefix + "[email]");
    validator.addField(namePrefix + "[primary][]");
}

$(form).repeater({
    initEmpty: false,

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

        const index = $(this).closest("[data-repeater-item]").index();
        
        addFields(index);
    },

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

// Initial fields
addFields(0);

// Submit button handler
const submitButton = document.getElementById("kt_docs_repeater_button");
submitButton.addEventListener("click", function (e) {
    // Prevent default button action
    e.preventDefault();

    // Validate form before submit
    if (validator) {
        validator.validate().then(function (status) {
            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_repeater_form" class="form" action="#" autocomplete="off">
    <!--
        The value given to the data-repeater-list attribute will be used as the
        base of rewritten name attributes. In this example, the first
        data-repeater-item's name attribute would become data[0][text-input],
        and the second data-repeater-item would become data[1][text-input]
    -->
    <!--begin::Form group-->
    <div class="form-group">
        <div data-repeater-list="data">
            <div data-repeater-item>
                <div class="fv-row form-group row mb-5">
                    <div class="col-md-3">
                        <label class="form-label">Name:</label>
                        <input type="text" class="form-control mb-2 mb-md-0" name="name" placeholder="Enter full name" />
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Email:</label>
                        <input type="email" class="form-control mb-2 mb-md-0" name="email" 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" name="primary" value="1"/>
                            <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-flex flex-center btn-light-danger mt-3 mt-md-9">
                            <i class="ki-duotone ki-trash fs-5">
                                <span class="path1"></span>
                                <span class="path2"></span>
                                <span class="path3"></span>
                                <span class="path4"></span>
                                <span class="path5"></span>
                            </i> Delete                                        
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end::Form group-->

    <!--begin::Form group-->
    <div class="form-group">
        <a href="javascript:;" data-repeater-create class="btn btn-flex flex-center btn-light-primary">
            <i class="ki-duotone ki-plus fs-3"></i> Add                        
        </a>
    </div>
    <!--end::Form group-->

    <div class="separator my-5"></div>

    <!--begin::Actions-->
    <button id="kt_docs_repeater_button" 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-->

Date range picker

For more information on Date Range Pickers, please visit the official website. 
// 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: ''
            })
        }
    }
);
<!--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-semibold 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-->

Flatpickr

For more information on Flatpickr, please visit the official website. 
// 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: ''
            })
        }
    }
);
<!--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-semibold 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-->

Image Input

For more information on our exclusive Image Input form, please visit the our documentation page.
Allowed file types: png, jpg, jpeg.
// 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: ''
            })
        }
    }
);
<!--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-semibold 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="ki-duotone ki-pencil fs-6"><span class="path1"></span><span class="path2"></span></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="ki-outline ki-cross fs-3"></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="ki-outline ki-cross fs-3"></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-->

Password Meter

For more information on our exclusive Password Meter, please visit the our documentation page.
Use 8 or more characters with a mix of letters, numbers & symbols. 
// 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: ''
            })
        }
    }
);
<!--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-semibold 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="ki-duotone ki-eye-slash fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                    <i class="ki-duotone ki-eye d-none fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span></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-semibold 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-->

Select2

For more information on Select2, please visit the official website. 
// 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');
});
<!--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-->

Tagify

For more information on Tagify, please visit the official website. 
// 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: ''
            })
        }
    }
);
<!--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-semibold 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-->

Datepicker

For more information on Tempus Dominus Bootstrap Datepicker, please visit the official website. 
// Define form element
const form = document.getElementById("kt_docs_formvalidation_datepicker");

// Tempus Dominus Bootstrap Datepicker --- for more info, please visit: https://getdatepicker.com/
tempusDominus.extend(tempusDominus.plugins.customDateFormat);

new tempusDominus.TempusDominus(document.getElementById("kt_datepicker"), {
    localization: {
        locale: "en",
        format: "dd/MM/yyyy, hh:mm T", // More info: https://getdatepicker.com/6/options/localization.html
    }
});

// Init form validation rules. For more info check the FormValidation plugin"s official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
    form,
    {
        fields: {
            "datepicker_input": {
                validators: {
                    notEmpty: {
                        message: "Flatpickr input is required"
                    }
                }
            },
        },

        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap: new FormValidation.plugins.Bootstrap5({
                rowSelector: ".fv-row",
                eleInvalidClass: "",
                eleValidClass: ""
            })
        }
    }
);

var input = form.querySelector("[name=datepicker_input]");
input.addEventListener("change", function() {
    // Revalidate it
    validator.revalidateField("datepicker_input");
});
<form id="kt_docs_formvalidation_datepicker" class="form" action="#" autocomplete="off">
    <!--begin::Input group-->
    <div class="fv-row mb-10">
        <!--begin::Label-->
        <label class="required fw-semibold fs-6 mb-2">Datepicker Input</label>
        <!--end::Label-->

        <!--begin::Input-->
        <input class="form-control" name="datepicker_input" placeholder="Pick a date" id="kt_datepicker" />
        <!--end::Input-->
    </div>
    <!--end::Input group-->

    <!--begin::Actions-->
    <button id="kt_docs_formvalidation_datepicker_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>

Inputmask

For more information on Inputmask, please visit the official website.
Custom date format: mm/dd/yyyy 
// Define form element
const form = document.getElementById("kt_docs_formvalidation_inputmask");
const maskOptions = {
    "mask" : "(999) 999-9999"
};

// Phone 
Inputmask(maskOptions).mask("#kt_inputmask");

var input = form.querySelector("[name=inputmask_input]");
input.addEventListener("change", function() {
    // Revalidate it
    validator.revalidateField("inputmask_input");
});

// Init form validation rules. For more info check the FormValidation plugin"s official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
    form,
    {
        fields: {
            "inputmask_input": {
                validators: {
                    notEmpty: {
                        message: "Inputmask input is required"
                    },
                    callback: {
                        message: "Invalid date",
                        callback: function (input) {
                            return Inputmask.isValid(input.value, maskOptions);
                        }
                    }
                }
            },
        },

        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_inputmask_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_inputmask" class="form" action="#" autocomplete="off">
    <!--begin::Input group-->
    <div class="fv-row mb-10">
        <!--begin::Label-->
        <label class="required fw-semibold fs-6 mb-2">Date:</label>
        <!--end::Label-->

        <!--begin::Input-->
        <input class="form-control form-control-solid" name="inputmask_input" placeholder="Pick a date" id="kt_inputmask" />
        <!--end::Input-->

        <div class="form-text">
            Custom date format: <code>mm/dd/yyyy</code>
        </div>
    </div>
    <!--end::Input group-->

    <!--begin::Actions-->
    <button id="kt_docs_formvalidation_inputmask_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-->
try metronic buy mega bundle
Preview Get Help Buy Now