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:

        
          
          
        
        
          
          <
          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 .

        
          
          
        
        
          
          <
          button
          
          type
          =
          "
          submit
          "
          
          name
          =
          "
          submit
          "
          >
          Submit
          
          button
          >
          
        
        
          
          <
          button
          
          type
          =
          "
          submit
          "
          
          id
          =
          "
          submit
          "
          >
          Submit
          
          button
          >
          
        
        
          
        
        
          
          
          
        
        
          
          <
          button
          
          type
          =
          "
          submit
          "
          
          name
          =
          "
          submitButton
          "
          >
          Submit
          
          button
          >

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