.has-success
or
.has-danger
class to the container element. It also adds
.is-valid
or
.is-invalid
class to the field element.If you want to remove the success class and feedback icon when a field is empty, then follow the next sections.
const
fv
=
FormValidation
.
formValidation
(
form
,
{
fields
:
{
...
}
,
plugins
:
{
...
}
,
}
)
.
on
(
'core.element.validated'
,
function
(
e
)
{
// e.element presents the field element
// e.valid indicates the field is valid or not
// Get the validator options
const
validators
=
fv
.
getFields
(
)
[
e
.
field
]
.
validators
;
// Check if the field has 'notEmpty' validator
if
(
validators
&&
validators
[
'notEmpty'
]
&&
validators
[
'notEmpty'
]
.
enabled
!==
false
)
{
return
;
}
// Get the field value
const
value
=
fv
.
getElementValue
(
e
.
field
,
e
.
element
)
;
if
(
e
.
valid
&&
value
===
''
)
{
// Now the field is empty and valid
// Remove the success color from the container
const
container
=
FormValidation
.
utils
.
closest
(
e
.
element
,
'.has-success'
)
;
FormValidation
.
utils
.
classSet
(
container
,
{
'has-success'
:
false
}
)
;
// Remove 'is-valid' class from the field element
FormValidation
.
utils
.
classSet
(
e
.
element
,
{
'is-valid'
:
false
}
)
;
}
}
)
;
const
fv
=
FormValidation
.
formValidation
(
form
,
{
fields
:
{
...
}
,
plugins
:
{
icon
:
new
FormValidation
.
plugins
.
Icon
(
{
...
}
)
,
}
,
}
)
// Get the icon plugin instance
// fv is the FormValidation instance created above
// Assume that you're using the Icon plugin under the name 'icon'
const
iconPlugin
=
fv
.
getPlugin
(
'icon'
)
;
const
iconElement
=
iconPlugin
&&
iconPlugin
.
icons
.
has
(
e
.
element
)
?
iconPlugin
.
icons
.
get
(
e
.
element
)
:
null
;
core.element.validated
's event handler, we can hide the icon element when the field is valid and empty. Don't forget to show it when the field isn't valid or field isn't empty:
const
iconPlugin
=
fv
.
getPlugin
(
'icon'
)
;
const
iconElement
=
iconPlugin
&&
iconPlugin
.
icons
.
has
(
e
.
element
)
?
iconPlugin
.
icons
.
get
(
e
.
element
)
:
null
;
// Get the field value
const
value
=
fv
.
getElementValue
(
e
.
field
,
e
.
element
)
;
if
(
e
.
valid
&&
value
===
''
)
{
...
// Hide the icon
iconElement
&&
(
iconElement
.
style
.
display
=
'none'
)
;
}
else
{
// Show the icon
iconElement
&&
(
iconElement
.
style
.
display
=
'block'
)
;
}