Using Material Design icons

If you are a fan of using Google's material design , then you might prefer to use its icons set .It's up to you to choose suitable icons from Google material design icons for the feedback icons. The following table is just an example of three icons taken from the set:

Field status	Icon
Valid	`check`
Invalid	`clear`
Being validated	`graphic_eq`

As you see, each Google material design icon uses pre-defined content instead of a different CSS class. Meanwhile, the Icon's plugin options only accept CSS classes that are added to the icon based on the field validity.The next section introduces two approaches to solve this problem.

Defining icon content by CSS

By using the :after CSS selector, we can indicated content of icons as following:

        
          .material-icons
          .valid-icon
          :after
          
          {
          
        
        
          
          content
          :
          
          'check'
          ;
          
        
        
          
          font-size
          :
          
          24
          px
          ;
          
        
        
          
          }
          
        
        
          
          .material-icons
          .invalid-icon
          :after
          
          {
          
        
        
          
          content
          :
          
          'clear'
          ;
          
        
        
          
          font-size
          :
          
          24
          px
          ;
          
        
        
          
          }
          
        
        
          
          .material-icons
          .validating-icon
          :after
          
          {
          
        
        
          
          content
          :
          
          'graphic_eq'
          ;
          
        
        
          
          font-size
          :
          
          24
          px
          ;
          
        
        
          
          }

Lastly, you just set the icons for each status of field:

        
          icon
          :
          
          new
          
          FormValidation
          .
          plugins
          .
          Icon
          (
          {
          
        
        
              valid
          :
          
          'material-icons valid-icon'
          ,
          
        
        
              invalid
          :
          
          'material-icons invalid-icon'
          ,
          
        
        
              validating
          :
          
          'material-icons validating-icon'
          ,
          
        
        
          
          }
          )
          ,

Defining icon content by CSS

Triggering the event

In order to update the content of icon based on the field validity status, we can trigger the event plugins.icon.set as mentioned in the Using SVG icons section above.

        
          FormValidation
          .
          formValidation
          (
          document
          .
          getElementById
          (
          'demoForm'
          )
          ,
          
          {
          
        
        
              plugins
          :
          
          {
          
        
        
                  icon
          :
          
          new
          
          FormValidation
          .
          plugins
          .
          Icon
          (
          {
          
        
        
                      valid
          :
          
          'material-icons icon-valid'
          ,
          
        
        
                      invalid
          :
          
          'material-icons icon-invalid'
          ,
          
        
        
                      validating
          :
          
          'material-icons icon-validating'
          ,
          
        
        
          
          }
          )
          ,
          
        
        
          
          }
          ,
          
        
        
          
          }
          )
          .
          on
          (
          'plugins.icon.set'
          ,
          
          function
          
          (
          e
          )
          
          {
          
        
        
          
          if
          
          (
          e
          .
          iconElement
          )
          
          {
          
        
        
          
          switch
          
          (
          e
          .
          status
          )
          
          {
          
        
        
          
          case
          
          'Validating'
          :
          
        
        
                          e
          .
          iconElement
          .
          innerHTML
          
          =
          
          'graphic_eq'
          ;
          
        
        
          
          break
          ;
          
        
        
          
        
        
          
          case
          
          'Invalid'
          :
          
        
        
                          e
          .
          iconElement
          .
          innerHTML
          
          =
          
          'clear'
          ;
          
        
        
          
          break
          ;
          
        
        
          
        
        
          
          case
          
          'Valid'
          :
          
        
        
                          e
          .
          iconElement
          .
          innerHTML
          
          =
          
          'check'
          ;
          
        
        
          
          break
          ;
          
        
        
          
        
        
          
          default
          :
          
        
        
                          e
          .
          iconElement
          .
          innerHTML
          
          =
          
          ''
          ;
          
        
        
          
          break
          ;
          
        
        
          
          }
          
        
        
          
          }
          
        
        
          
          }
          )
          ;

Triggering the event

Using Material Design icons

Defining icon content by CSS

Triggering the event

See also