Documentation v8.1.5

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 inputtypes within a formthat has FormValidation attached to it.

All input types require the nameattribute 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

														JAVASCRIPT
													

														HTML
													

															// 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-semibold 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-rowCSS class to the input group to identify the input field that requires FormValidation Javascript setup rowSelector: '.fv-row'.

Email Input

														JAVASCRIPT
													

														HTML
													

															// 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-semibold 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 [email protected]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

														JAVASCRIPT
													

														HTML
													

															// 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-semibold 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

														JAVASCRIPT
													

														HTML
													

															// 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-semibold 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 option 1

Radio option 2

Radio option 3

														JAVASCRIPT
													

														HTML
													

															// 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-semibold 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-semibold 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-semibold 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-semibold 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 option 1

Checkbox option 2

Checkbox option 3

														JAVASCRIPT
													

														HTML
													

															// 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-semibold 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-semibold 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-semibold 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-semibold 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-->
														

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.1.5

Overview

Text Input

Email Input

Textarea Input

Input Group

Radio Input

Checkbox Input

Learn & Get Inspired

Support at devs.keenthemes.com

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.1.5

No result found

Overview

Text Input

Email Input

Textarea Input

Input Group

Radio Input

Checkbox Input

Learn & Get Inspired

Support at devs.keenthemes.com