Integrating with Bootbox

In this example, we will use bootbox.js to display and validate a login form inside a modal. Initially, the login form isn't displayed:

        
          <
          button
          
          type
          =
          "
          submit
          "
          
          class
          =
          "
          btn btn-default
          "
          
          id
          =
          "
          loginButton
          "
          >
          Login
          
          button
          >
          
        
        
          
        
        
          
          <
          form
          
          id
          =
          "
          loginForm
          "
          
          method
          =
          "
          POST
          "
          
          class
          =
          "
          form-horizontal
          "
          
          style
          =
          "
          display
          :
           none
          ;
          "
          >
          ...
          
          form
          >

When click the login button, we will show up the modal. We might need to reset the previous form values using the resetForm method .

        
          const
           loginForm 
          =
          
          document
          .
          getElementById
          (
          'loginForm'
          )
          ;
          
        
        
          
        
        
          
          const
           fv 
          =
          
          FormValidation
          .
          formValidation
          (
          loginForm
          ,
          
          {
          
        
        
              fields
          :
          
          {
          
        
        
          
          ...
          
        
        
          
          }
          ,
          
        
        
              plugins
          :
          
          {
          
        
        
          
          ...
          
        
        
          
          }
          ,
          
        
        
          
          }
          )
          ;
          
        
        
          
        
        
          
          document
          .
          getElementById
          (
          'loginButton'
          )
          .
          addEventListener
          (
          'click'
          ,
          
          function
          (
          )
          
          {
          
        
        
              bootbox
        
        
          
          .
          dialog
          (
          {
          
        
        
                      title
          :
          
          'Login'
          ,
          
        
        
                      message
          :
           loginForm
          ,
          
        
        
                      size
          :
          
          'small'
          ,
          
        
        
                      show
          :
          
          false
          
          // We will show it manually later
          
        
        
          
          }
          )
          
        
        
          
          .
          on
          (
          'shown.bs.modal'
          ,
          
          function
          (
          )
          
          {
          
        
        
          
          // Show the login form
          
        
        
                      loginForm
          .
          style
          .
          display
          
          =
          
          'block'
          ;
          
        
        
          
        
        
          
          // Reset form
          
        
        
                      fv
          .
          resetForm
          (
          true
          )
          ;
          
        
        
          
          }
          )
          
        
        
          
          .
          on
          (
          'hide.bs.modal'
          ,
          
          function
          (
          )
          
          {
          
        
        
          
          // Bootbox will remove the modal (including the body
          
        
        
          
          // which contains the login form) after hiding the modal
          
        
        
          
          // Therefor, we need to backup the form
          
        
        
          
        
        
                      loginForm
          .
          style
          .
          display
          
          =
          
          'none'
          ;
          
        
        
          
          document
          .
          body
          .
          appendChild
          (
          loginForm
          )
          ;
          
        
        
          
          }
          )
          
        
        
          
          .
          modal
          (
          'show'
          )
          ;
          
        
        
          
          }
          )
          ;

You can take a look at the Sample Code to see the full code:

Integrating with Bootbox

If you want to use Ajax to submit the form, we can trigger the core.form.valid event:

        
          const
           fv 
          =
          
          FormValidation
          
        
        
          
          .
          formValidation
          (
          loginForm
          ,
          
          {
          
        
        
                  fields
          :
          
          {
          
        
        
          
          ...
          
        
        
          
          }
          ,
          
        
        
                  plugins
          :
          
          {
          
        
        
          
          ...
          
        
        
          
          }
          ,
          
        
        
          
          }
          )
          
        
        
          
          .
          on
          (
          'core.form.valid'
          ,
          
          function
          (
          )
          
          {
          
        
        
          
          // Send the form data to back-end
          
        
        
          
          // You need to grab the form data and create an Ajax request to send them
          
        
        
          
        
        
          
          // Since the Bootbox and Bootstrap require jQuery
          
        
        
          
          // we can use jQuery methods for getting the form data
          
        
        
          
          // and creating Ajax request
          
        
        
          
        
        
                  $
          .
          post
          (
          $
          (
          loginForm
          )
          .
          attr
          (
          'action'
          )
          ,
          
          $
          (
          loginForm
          )
          .
          serialize
          (
          )
          ,
          
          function
          (
          result
          )
          
          {
          
        
        
          
          // ... Process the result ...
          
        
        
          
        
        
          
          // Hide the modal containing the form
          
        
        
          
          $
          (
          loginForm
          )
          .
          parents
          (
          '.bootbox'
          )
          .
          modal
          (
          'hide'
          )
          ;
          
        
        
          
          }
          ,
          
          'json'
          )
          ;
          
        
        
          
          }
          )
          ;