FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

Form is submitted twice

← ejemplos

By default, after pressing the submit button, the plugin will validate fields and then submit the form if all fields are valid. If you use a custom submit handler, the form might be submitted more than one time.

This page will help you how to solve the issue.

Triggering the success.form.fv event

To prevent the plugin from submitting the form automatically, you can trigger the success.form.fv event:

$(document).ready(function() {
    $(form)
        .formValidation({
            ... options ...
        })
        .on('success.form.fv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // You can get the form instance
            var $form = $(e.target);

            // and the FormValidation instance
            var fv = $form.data('formValidation');

            // Do whatever you want here ...

            // Use the defaultSubmit() method if you want to submit the form
            // See http://formvalidation.io/api/#default-submit
            fv.defaultSubmit();
        });
});

You can use a custom submit handler like the following way:

$(document).ready(function() {
    $(form)
        .formValidation({
            ... options ...
        })
        .on('success.form.fv', function(e) {
            // Prevent form submission
            e.preventDefault();
        });

    // Custom submit handler
    $(form).submit(function(e) {
        // You can get the form instance
        var $form = $(e.target);

        // and the FormValidation instance
        var fv = $form.data('formValidation');

        // Do whatever you want here ...
    });
});

Ensure that success.form.fv is triggered once

In some cases, even when using e.preventDefault() inside the success.form.fv event handler, the form is still submitted twice. The issue is caused by the fact that the success.form.fv event is triggered more than one time.

For example, in the following snippet, we initialize the plugin and handle the event when clicking on particular button:

$(document).ready(function() {
    $('#addToCartButton').on('click', function() {
        $('#paymenForm')
            .formValidation({
                ... options ...
            })
            .on('success.form.fv', function(e) {
                // Prevent form submission
                e.preventDefault();

                // Do custom handler
                // such as sending data to server using Ajax ...
            });
    });
});

As you see, the success.form.fv event is handler inside the addToCartButton button click handler, the event will be triggered multiple times from the second, third, ... time you click the button.

To solve this issue, you can remove the previous handler of success.form.fv event by either destroying the plugin instance before creating new one:

$(document).ready(function() {
    $('#addToCartButton').on('click', function() {
        $('#paymenForm')
            // Destroy the plugin instance and all event attached with it
            .formValidation('destroy')

            .formValidation({
                ... options ...
            })

            .on('success.form.fv', function(e) {
                // Prevent form submission
                e.preventDefault();

                ...
            });
    });
});

or calling .off('success.form.fv'):

$(document).ready(function() {
    $('#addToCartButton').on('click', function() {
        $('#paymenForm')
            .formValidation({
                ... options ...
            })

            // Removed the previous success.form.fv handler
            .off('success.form.fv')

            .on('success.form.fv', function(e) {
                // Prevent form submission
                e.preventDefault();

                ...
            });
    });
});

Related example