plugins.icon.set
that you can hook on when the field is being validated, valid or invalid:
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
icon
:
new
FormValidation
.
plugins
.
Icon
(
{
...
}
)
,
}
,
}
)
.
on
(
'plugins.icon.set'
,
function
(
e
)
{
// e.element presents the field element
// e.field is the field name
// e.status is the validation status which
// can be 'NotValidated', 'Validating', 'Valid' or 'Invalid'
// e.iconElement presents the icon element that associates with the field element
if
(
e
.
iconElement
)
{
switch
(
e
.
status
)
{
case
'Validating'
:
e
.
iconElement
.
innerHTML
=
'...'
;
break
;
case
'Invalid'
:
e
.
iconElement
.
innerHTML
=
'...'
;
break
;
case
'Valid'
:
e
.
iconElement
.
innerHTML
=
'...'
;
break
;
default
:
e
.
iconElement
.
innerHTML
=
''
;
break
;
}
}
}
)
;
e.iconElement.innerHTML
. You might need to set the
width
,
height
attributes for the SVG element to make it fit in the field. Also, the icon color can be adjusted by setting the
stroke
attribute:
<
svg
xmlns
=
"
http://www.w3.org/2000/svg
"
viewBox
=
"
0 0 512.333 512
"
width
=
"
16
"
height
=
"
16
"
>
<
path
d
=
"
"
stroke
=
"
#ff4136
"
/>
svg
>
<
svg
xmlns
=
"
http://www.w3.org/2000/svg
"
viewBox
=
"
0 0 512.333 512
"
width
=
"
16
"
height
=
"
16
"
>
<
path
d
=
"
M440.935 12.574l3.966 82.766C399.416
41.904 331.674 8 256 8 134.813 8 33.933 94.924
12.296 209.824 10.908 217.193 16.604 224 24.103
224h49.084c5.57 0 10.377-3.842 11.676-9.259C103.407
137.408 172.c60.893 0 114.512 30.856
146.104 77.801l-101.53-4.865c-6.845-.328-12.574
5.133-12.574 11.986v47.411c0 6.627 5.373 12 12
12h200.333c6.627 0 12-5.373
12-12V12c0-6.627-5.373-12-12-12h-47.411c-6.853
0-12.315 5.729-11.987 12.574zM256 432c-60.895
0-114.517-30.858-146.109-77.805l101.868 4.871c6.845.327
12.573-5.134
12.573-11.986v-47.412c0-6.627-5.373-12-12-12H12c-6.627
0-12 5.373-12 12V500c0 6.627 5.373 12 12
12h47.385c6.863 0 12.328-5.745
11.985-12.599l-4.129-82.575C112.725 470.166 180.405
c121.187 0 222.067-86.924 243.704-201.824
1.388-7.369-4.308-14.176-11.807-14.176h-49.084c-5.57
0-10.377 3.842-11.676 9.259C408.593 374.592 339.069
z
"
/>
svg
>
<
svg
xmlns
=
"
http://www.w3.org/2000/svg
"
viewBox
=
"
0 0 352 512
"
width
=
"
16
"
height
=
"
16
"
>
<
path
d
=
"
M242.72 256l100.07-100.07c12.28-12.28
12.28-32.19
0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48
0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48
0L9.21 111.45c-12.28 12.28-12.28 32.19 0
44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28
32.19 0 44.48l22.24 22.24c12.28 12.28 32.2
12.28 44.48 0L176 322.72l100.07 100.07c12.28
12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28
12.28-32.19 0-44.48L242.72 256z
"
/>
svg
>
<
svg
xmlns
=
"
http://www.w3.org/2000/svg
"
viewBox
=
"
0 0 512 512
"
width
=
"
16
"
height
=
"
16
"
>
<
path
d
=
"
M173.898
439.404l-166.4-166.4c-9.997-9.997-9.997-26.206
0-36.204l36.203-36.204c9.997-9.998 26.207-9.998
36.204 0L192 312.69 432.095 72.596c9.997-9.997
26.207-9.997 36.204 0l36.203 36.204c9.997
9.997 9.997 26.206 0 36.204l-294.4
294.401c-9.998 9.997-26.207 9.997-36.204-.001z
"
/>
svg
>
refresh
<
svg
xmlns
=
"
http://www.w3.org/2000/svg
"
width
=
"
20
"
height
=
"
20
"
viewBox
=
"
0 0 20 20
"
>
<
path
fill
=
"
none
"
stroke
=
"
#000
"
stroke-width
=
"
1.1
"
d
=
"
M17.08,11.15 C17.09,11.31 17.1,11.47
17.1,11.64 C17.1,15.53 13.94,18.69
10.05,18.69 C6.16,18.68 3,15.53 3,11.63
C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58
11.71,4.73 12.46,5
"
>
path
>
<
polyline
fill
=
"
none
"
stroke
=
"
#000
"
points
=
"
9.9 2 12.79 4.89 9.79 7.9
"
>
polyline
>
svg
>
close
<
svg
xmlns
=
"
http://www.w3.org/2000/svg
"
width
=
"
20
"
height
=
"
20
"
viewBox
=
"
0 0 20 20
"
>
<
path
fill
=
"
none
"
stroke
=
"
#000
"
stroke-width
=
"
1.06
"
d
=
"
M16,16 L4,4
"
>
path
>
<
path
fill
=
"
none
"
stroke
=
"
#000
"
stroke-width
=
"
1.06
"
d
=
"
M16,4 L4,16
"
>
path
>
svg
>
check
<
svg
xmlns
=
"
http://www.w3.org/2000/svg
"
width
=
"
20
"
height
=
"
20
"
viewBox
=
"
0 0 20 20
"
>
<
polyline
fill
=
"
none
"
stroke
=
"
#000
"
stroke-width
=
"
1.1
"
points
=
"
4,10 8,15 17,4
"
>
polyline
>
svg
>