Can not submit form after validation

There are some mistakes causing the issue that the form can't be submitted although the validation is working fine. This page collects some popular check list to avoid this problem.

Enabling the DefaultSubmit plugin

Before v1.0.0, the form will be submitted automatically if all fields are valid. There are some cases user wants to do something else such as

sending form to back-end via an Ajax request
jumping to the next step in a wizard

So, the default behaviour is removed from v1.0.0. It's up to users to decide what they want to do. If you want to submit the form when all fields are valid, then enable the DefaultSubmit plugin:

FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            // Validate fields when clicking the Submit button
            submitButton: new FormValidation.plugins.SubmitButton(),

            // Submit the form when all fields are valid
            defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
            ...
        },
    }
);

The target is not a form

Please ensure that the target is a HTML form element:

<!-- It will be submitted because it is NOT a form tag -->
<div id="container" method="POST">...</div>

<script>
    document.addEventListener('DOMContentLoaded', function(e) {
        FormValidation.formValidation(
            document.getElementById('container'),
            {
                fields: {
                    ...
                },
                plugins: {
                    defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                    ...
                },
            }
        );
    });
</script>

The target's ID is duplicated

In the case you are using an ID selector, ensure that there is only one element on page having that ID:

<div id="payment"></div>

<form id="payment"></form>

<script>
    document.addEventListener('DOMContentLoaded', function(e) {
        FormValidation.formValidation(
            document.getElementById('payment'),
            {
                fields: {
                    ...
                },
                plugins: {
                    ...
                },
            }
        );
    });
</script>

The submit button's name is not valid

If the form can't be submitted, the reason might be caused by using name="submit" or id="submit" attribute for the submit button.

Behind the scene, FormValidation uses the submit() method to submit the form. If the submit button has either name="submit" or id="submit" attribute, then form.submit will return the submit button instance instead of submitting the form. That's why we can't submit the form.

The similar issue occurs when using special properties of form such as reset, length, method.

<!-- Do NOT -->
<button type="submit" name="submit">Submit</button>
<button type="submit" id="submit">Submit</button>

<!-- Do -->
<button type="submit" name="submitButton">Submit</button>

DOMLint has a complete list of rules to check the markup for these kind of problems.