Validating checkbox list placed in multiple columns

In this example, you will see how to validate a list of checkboxes which are placed in multiple columns.

The following form asks us to choose at least one day that we will be notified when the event is going to happen. The list of days are placed inside two columns which have the same w-50 class (assuming you're using the Tachyons framework).

We need to define the elements that display the feedback icon and error message:

        
          <
          div
          
          class
          =
          "
          cf mb2
          "
          >
          
        
        
          
          <
          div
          
          class
          =
          "
          fl w-100
          "
          >
          
        
        
          
          <
          div
          
          class
          =
          "
          fl w-25 pa2
          "
          >
          Alert on
          
          div
          >
          
        
        
          
          <
          div
          
          class
          =
          "
          fl w-75
          "
          >
          
        
        
          
          <
          div
          
          class
          =
          "
          w-100 js-alert-field-container
          "
          >
          
        
        
          
          <
          div
          
          class
          =
          "
          fl w-50
          "
          >
          
        
        
          
          
          
        
        
          
          
          div
          >
          
        
        
          
          <
          div
          
          class
          =
          "
          fl w-50
          "
          >
          
        
        
          
          
          
        
        
          
          
          div
          >
          
        
        
          
        
        
          
          
          
        
        
          
          <
          div
          
          id
          =
          "
          alertDayIcon
          "
          >
          
          div
          >
          
        
        
          
          
          div
          >
          
        
        
          
          
          div
          >
          
        
        
          
          
          div
          >
          
        
        
          
          
          div
          >
          
        
        
          
        
        
          
          <
          div
          
          class
          =
          "
          cf mb2
          "
          >
          
        
        
          
          <
          div
          
          class
          =
          "
          fl w-100
          "
          >
          
        
        
          
          <
          div
          
          class
          =
          "
          fl w-25 pa2
          "
          >
          
          div
          >
          
        
        
          
          <
          div
          
          class
          =
          "
          fl w-75
          "
          >
          
        
        
          
          
          
        
        
          
          <
          div
          
          id
          =
          "
          alertDayMessage
          "
          >
          
          div
          >
          
        
        
          
          
          div
          >
          
        
        
          
          
          div
          >
          
        
        
          
          
          div
          >

The checkboxes are placed in the same row, inside .js-alert-field-container element. We need to let the Tachyons plugin know how it can find these fields:

        
          const
           form 
          =
          
          document
          .
          getElementById
          (
          'demoForm'
          )
          ;
          
        
        
          
          const
           fv 
          =
          
          FormValidation
          .
          formValidation
          (
          form
          ,
          
          {
          
        
        
              fields
          :
          
          {
          
        
        
          
          ...
          
        
        
          
          }
          ,
          
        
        
              plugins
          :
          
          {
          
        
        
                  tachyons
          :
          
          new
          
          FormValidation
          .
          plugins
          .
          Tachyons
          (
          {
          
        
        
          
          rowSelector
          :
          
          function
          (
          field
          ,
           ele
          )
          
          {
          
        
        
          
          return
           field 
          ===
          
          'alertDay'
          
          ?
          
          '.js-alert-field-container'
          
          :
          
          '.fl'
          ;
          
        
        
          
          }
          ,
          
        
        
          
          }
          )
          ,
          
        
        
          
          }
          ,
          
        
        
          
          }
          )
          ;

You should look at the rowSelector option when using multiple fields on the same row. Refer to the Multiple fields on the same row section when using with plugin supports popular CSS framework, such as Bootstrap , Tachyons , .etc

To show the feedback icon at the element #alertDayIcon , we need to use onPlaced option which is called when the icon element is inserted to the document:

        
          const
           fv 
          =
          
          FormValidation
          .
          formValidation
          (
          form
          ,
          
          {
          
        
        
              fields
          :
          
          {
          
        
        
          
          ...
          
        
        
          
          }
          ,
          
        
        
              plugins
          :
          
          {
          
        
        
                  icon
          :
          
          new
          
          FormValidation
          .
          plugins
          .
          Icon
          (
          {
          
        
        
                      valid
          :
          
          'fa fa-check'
          ,
          
        
        
                      invalid
          :
          
          'fa fa-times'
          ,
          
        
        
                      validating
          :
          
          'fa fa-refresh'
          ,
          
        
        
          
          onPlaced
          :
          
          function
          (
          e
          )
          
          {
          
        
        
          
          if
          
          (
          e
          .
          field
          
          ===
          
          'alertDay'
          )
          
          {
          
        
        
          
          document
          .
          getElementById
          (
          'alertDayIcon'
          )
          .
          appendChild
          (
          e
          .
          iconElement
          )
          ;
          
        
        
          
          }
          
        
        
          
          }
          ,
          
        
        
          
          }
          )
          ,
          
        
        
          
          }
          ,
          
        
        
          
          }
          )
          ;

The last step is to indicate the container where the associated messages are shown:

        
          const
           fv 
          =
          
          FormValidation
          .
          formValidation
          (
          form
          ,
          
          {
          
        
        
              fields
          :
          
          {
          
        
        
          
          ...
          
        
        
          
          }
          ,
          
        
        
              plugins
          :
          
          {
          
        
        
                  message
          :
          
          new
          
          FormValidation
          .
          plugins
          .
          Message
          (
          {
          
        
        
                      clazz
          :
          
          'red lh-copy'
          ,
          
        
        
          
          container
          :
          
          function
          (
          field
          ,
           ele
          )
          
          {
          
        
        
          
          return
           field 
          ===
          
          'alertDay'
          
        
        
          
          ?
          
          document
          .
          getElementById
          (
          'alertDayMessage'
          )
          
        
        
          
          :
          
          FormValidation
          .
          plugins
          .
          Message
          .
          getClosestContainer
          (
          ele
          ,
           form
          ,
          
          /
          ^(.*)fl(.*)$
          /
          )
          ;
          
        
        
          
          }
          ,
          
        
        
          
          }
          )
          ,
          
        
        
          
          }
          ,
          
        
        
          
          }
          )
          ;

Look at the Showing messages in custom area section for more details.

Validating checkbox list placed in multiple columns

Validating checkbox list placed in multiple columns

See also