This site contains the document for old version. Please upgrade to the latest version v1.0.0

Can't submit form after validation

Examples

After clicking the submit button, the plugin will submit the form automatically if all fields are valid. 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.

The target is not a form

When calling $(target).formValidation(), please ensure that the target is a HTML form element:

<!-- Do NOT -->
<div id="container"></div>

<script>
$(document).ready(function() {
    $('#container').formValidation({
        ...
    });
});
</script>

<!-- Do -->
<form id="myForm"></form>

<script>
$(document).ready(function() {
    $('#myForm').formValidation({
        ...
    });
});
</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:

<!-- Do NOT -->
<div id="payment"></div>

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

<script>
$(document).ready(function() {
    $('#payment').formValidation({
        ...
    });
});
</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 jQuery's submit() method to submit the form. If the submit button has either name="submit" or id="submit" attribute, then $(form)[0].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" class="btn btn-primary">Submit</button>

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

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