Integrating with Bootstrap button group

In the following example, you will see how to use FormValidation with the Bootstrap button group . Basically, we have multiple radios which are wrapper inside a data-toggle="buttons" element:

        
          <
          div
          
          class
          =
          "
          form-group row
          "
          >
          
        
        
          
          <
          label
          
          class
          =
          "
          col-sm-3 col-form-label
          "
          >
          Gender
          
          label
          >
          
        
        
          
          <
          div
          
          class
          =
          "
          col-sm-9
          "
          
          id
          =
          "
          genderContainer
          "
          >
          
        
        
          
          <
          div
          
          class
          =
          "
          btn-group btn-group-toggle
          "
          
          data-toggle
          =
          "
          buttons
          "
          >
          
        
        
          
          <
          label
          
          class
          =
          "
          btn btn-secondary
          "
          >
          
          <
          input
          
          type
          =
          "
          radio
          "
          
          name
          =
          "
          gender
          "
          
          value
          =
          "
          male
          "
          
          />
           Male 
          
          label
          >
          
        
        
          
          <
          label
          
          class
          =
          "
          btn btn-secondary
          "
          >
          
          <
          input
          
          type
          =
          "
          radio
          "
          
          name
          =
          "
          gender
          "
          
          value
          =
          "
          female
          "
          
          />
           Female 
          
          label
          >
          
        
        
          
          <
          label
          
          class
          =
          "
          btn btn-secondary
          "
          >
          
          <
          input
          
          type
          =
          "
          radio
          "
          
          name
          =
          "
          gender
          "
          
          value
          =
          "
          other
          "
          
          />
           Other 
          
          label
          >
          
        
        
          
          
          div
          >
          
        
        
          
          
          div
          >
          
        
        
          
          
          div
          >

Customizing icon position

You can ignore this section if you don't use the Icon plugin . In order to show the feedback icon at the desired position, we need to hook on the onPlaced event:

        
          icon
          :
          
          new
          
          FormValidation
          .
          plugins
          .
          Icon
          (
          {
          
        
        
          
          ...
          
        
        
          
          onPlaced
          :
          
          function
          (
          e
          )
          
          {
          
        
        
          
          if
          
          (
          e
          .
          field
          
          ===
          
          'gender'
          )
          
          {
          
        
        
          
          // Place the icon for "gender" element
          
        
        
          
          // at the end of "genderContainer" element
          
        
        
          
          document
          .
          getElementById
          (
          'genderContainer'
          )
          .
          appendChild
          (
          e
          .
          iconElement
          )
          ;
          
        
        
          
          }
          
        
        
          
          }
          
        
        
          
          }
          )
          ,

Revalidating the field

Bootstrap 4.3.1 prevents the default action of radio buttons when being used with data-toggle="buttons" . So, we need to revalidate the field when it's changed manually:

        
          const
           demoForm 
          =
          
          document
          .
          getElementById
          (
          'demoForm'
          )
          ;
          
        
        
          
        
        
          
          const
           fv 
          =
          
          FormValidation
          .
          formValidation
          (
          demoForm
          ,
          
          {
          
        
        
              fields
          :
          
          {
          
        
        
                  gender
          :
          
          {
          
        
        
                      validators
          :
          
          {
          
        
        
                          notEmpty
          :
          
          {
          
        
        
                              message
          :
          
          'The gender is required'
          
        
        
          
          }
          
        
        
          
          }
          
        
        
          
          }
          ,
          
        
        
          
          }
          ,
          
        
        
              plugins
          :
          
          {
          
        
        
          
          ...
          
        
        
          
          }
          
        
        
          
          }
          )
          ;
          
        
        
          
        
        
          
          $
          (
          demoForm
          )
          .
          find
          (
          '[name="gender"]'
          )
          .
          on
          (
          'change'
          ,
          
          function
          (
          )
          
          {
          
        
        
              fv
          .
          revalidateField
          (
          'gender'
          )
          ;
          
        
        
          
          }
          )
          ;

You should look at the basic principle when integrating FormValidation with 3rd party libraries

Integrating with Bootstrap button group