# Documentation v8.0.38

Preview Downloads Purchase
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 basic `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.

# Text Input

Text Input

    // Define form element
    const form = document.getElementById('kt_docs_formvalidation_text');

    // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
    var validator = FormValidation.formValidation(
        form,
        {
            fields: {
                'text_input': {
                    validators: {
                        notEmpty: {
                            message: 'Text 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_text_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_text" 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">Text Input</label>
            <!--end::Label-->

            <!--begin::Input-->
            <input type="text" name="text_input" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="" value="" />
            <!--end::Input-->
        </div>
        <!--end::Input group-->

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

Add `fv-row`CSS class to the input group to identify the input field that requires FormValidation Javascript setup `rowSelector: '.fv-row'`.

# Email Input

Email Input

    // Define form element
    const form = document.getElementById('kt_docs_formvalidation_email');

    // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
    var validator = FormValidation.formValidation(
        form,
        {
            fields: {
                'email_input': {
                    validators: {
                        emailAddress: {
                            message: 'The value is not a valid email address'
                        },
                        notEmpty: {
                            message: 'Email address 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_email_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_email" 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">Email Input</label>
            <!--end::Label-->

            <!--begin::Input-->
            <input type="email" name="email_input" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="" value="" />
            <!--end::Input-->
        </div>
        <!--end::Input group-->

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

Is `example@b`valid email address?. Yes! It's valid email address. If you want to treat these kind of email addresses as invalid one, you can use the regexp validator to define expression of email address.

# Textarea Input

Textarea Input

    // Define form element
    const form = document.getElementById('kt_docs_formvalidation_textarea');

    // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
    var validator = FormValidation.formValidation(
        form,
        {
            fields: {
                'textarea_input': {
                    validators: {
                        notEmpty: {
                            message: 'Textarea 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_textarea_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_textarea" 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">Textarea Input</label>
            <!--end::Label-->

            <!--begin::Input-->
            <textarea name="textarea_input" class="form-control form-control-solid"></textarea>
            <!--end::Input-->
        </div>
        <!--end::Input group-->

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

# Input Group

Your URL
example.com

    // Define form element
    const form = document.getElementById('kt_docs_formvalidation_input_group');

    // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
    var validator = FormValidation.formValidation(
        form,
        {
            fields: {
                'input_group_input': {
                    validators: {
                        notEmpty: {
                            message: 'Textarea 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_input_group_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_input_group" class="form" action="#" autocomplete="off">
        <!--begin::Input wrapper-->
        <div class="fv-row mb-10">
            <!--begin::Input group-->
            <label for="basic-url" class="required fw-bold fs-6 mb-2">Your URL</label>
            <div class="input-group mb-5">
                <span class="input-group-text" id="basic-addon3">example.com</span>
                <input type="text" class="form-control" id="basic-url" name="input_group_input" aria-describedby="basic-addon3"/>
            </div>
            <!--end::Input group-->
        </div>
        <!--end::Input wrapper-->

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

# Radio Input

Radio Input
Radio option 1
Radio option 2
Radio option 3

    // Define form element
    const form = document.getElementById('kt_docs_formvalidation_radio');

    // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
    var validator = FormValidation.formValidation(
        form,
        {
            fields: {
                'radio_input': {
                    validators: {
                        notEmpty: {
                            message: 'Radio 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_radio_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_radio" class="form" action="#" autocomplete="off">
        <!--begin::Input group-->
        <div class="mb-10">
            <!--begin::Label-->
            <label class="required fw-bold fs-6 mb-5">Radio Input</label>
            <!--end::Label-->

            <!--begin::Input row-->
            <div class="d-flex flex-column fv-row">
                <!--begin::Radio-->
                <div class="form-check form-check-custom form-check-solid mb-5">
                    <!--begin::Input-->
                    <input class="form-check-input me-3" name="radio_input" type="radio" value="1" id="kt_docs_formvalidation_radio_option_1" />
                    <!--end::Input-->

                    <!--begin::Label-->
                    <label class="form-check-label" for="kt_docs_formvalidation_radio_option_1">
                        <div class="fw-bolder text-gray-800">Radio option 1</div>
                    </label>
                    <!--end::Label-->
                </div>
                <!--end::Radio-->

                <!--begin::Radio-->
                <div class="form-check form-check-custom form-check-solid mb-5">
                    <!--begin::Input-->
                    <input class="form-check-input me-3" name="radio_input" type="radio" value="2" id="kt_docs_formvalidation_radio_option_2" />
                    <!--end::Input-->

                    <!--begin::Label-->
                    <label class="form-check-label" for="kt_docs_formvalidation_radio_option_2">
                        <div class="fw-bolder text-gray-800">Radio option 2</div>
                    </label>
                    <!--end::Label-->
                </div>
                <!--end::Radio-->

                <!--begin::Radio-->
                <div class="form-check form-check-custom form-check-solid">
                    <!--begin::Input-->
                    <input class="form-check-input me-3" name="radio_input" type="radio" value="3" id="kt_docs_formvalidation_radio_option_3" />
                    <!--end::Input-->

                    <!--begin::Label-->
                    <label class="form-check-label" for="kt_docs_formvalidation_radio_option_3">
                        <div class="fw-bolder text-gray-800">Radio option 3</div>
                    </label>
                    <!--end::Label-->
                </div>
                <!--end::Radio-->
            </div>
            <!--end::Input row-->
        </div>
        <!--end::Input group-->

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

# Checkbox Input

Checkbox Input
Checkbox option 1
Checkbox option 2
Checkbox option 3

    // Define form element
    const form = document.getElementById('kt_docs_formvalidation_checkbox');

    // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
    var validator = FormValidation.formValidation(
        form,
        {
            fields: {
                'checkbox_input': {
                    validators: {
                        notEmpty: {
                            message: 'Radio 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_checkbox_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_checkbox" class="form" action="#" autocomplete="off">
        <!--begin::Input group-->
        <div class="mb-10">
            <!--begin::Label-->
            <label class="required fw-bold fs-6 mb-5">Checkbox Input</label>
            <!--end::Label-->

            <!--begin::Input row-->
            <div class="d-flex flex-column fv-row">
                <!--begin::Checkbox-->
                <div class="form-check form-check-custom form-check-solid mb-5">
                    <!--begin::Input-->
                    <input class="form-check-input me-3" name="checkbox_input" type="checkbox" value="1" id="kt_docs_formvalidation_checkbox_option_1" />
                    <!--end::Input-->

                    <!--begin::Label-->
                    <label class="form-check-label" for="kt_docs_formvalidation_checkbox_option_1">
                        <div class="fw-bolder text-gray-800">Checkbox option 1</div>
                    </label>
                    <!--end::Label-->
                </div>
                <!--end::Checkbox-->

                <!--begin::Checkbox-->
                <div class="form-check form-check-custom form-check-solid mb-5">
                    <!--begin::Input-->
                    <input class="form-check-input me-3" name="checkbox_input" type="checkbox" value="2" id="kt_docs_formvalidation_checkbox_option_2" />
                    <!--end::Input-->

                    <!--begin::Label-->
                    <label class="form-check-label" for="kt_docs_formvalidation_checkbox_option_2">
                        <div class="fw-bolder text-gray-800">Checkbox option 2</div>
                    </label>
                    <!--end::Label-->
                </div>
                <!--end::Checkbox-->

                <!--begin::Checkbox-->
                <div class="form-check form-check-custom form-check-solid">
                    <!--begin::Input-->
                    <input class="form-check-input me-3" name="checkbox_input" type="checkbox" value="3" id="kt_docs_formvalidation_checkbox_option_3" />
                    <!--end::Input-->

                    <!--begin::Label-->
                    <label class="form-check-label" for="kt_docs_formvalidation_checkbox_option_3">
                        <div class="fw-bolder text-gray-800">Checkbox option 3</div>
                    </label>
                    <!--end::Label-->
                </div>
                <!--end::Checkbox-->
            </div>
            <!--end::Input row-->
        </div>
        <!--end::Input group-->

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

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now