<
div
class
=
"
form-group row
"
>
<
label
class
=
"
col-sm-3 col-form-label
"
>
Username
label
>
<
div
class
=
"
col-sm-6
"
>
<
input
type
=
"
text
"
class
=
"
form-control
"
name
=
"
username
"
autocomplete
=
"
off
"
/>
<
div
class
=
"
progress mt-2
"
id
=
"
progressBar
"
style
=
"
opacity
:
0
;
"
>
<
div
class
=
"
progress-bar progress-bar-striped progress-bar-animate
"
style
=
"
width
:
100
%
"
>
div
>
div
>
div
>
div
>
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
username
:
{
validators
:
{
notEmpty
:
{
message
:
'The username is required'
}
,
remote
:
{
message
:
'The username is already taken'
,
method
:
'GET'
,
url
:
'...'
,
}
,
}
}
,
...
}
,
plugins
:
{
...
}
,
}
)
.
on
(
'core.validator.validating'
,
function
(
e
)
{
if
(
e
.
field
===
'username'
&&
e
.
validator
===
'remote'
)
{
document
.
getElementById
(
'progressBar'
)
.
style
.
opacity
=
'1'
;
}
}
)
.
on
(
'core.validator.validated'
,
function
(
e
)
{
if
(
e
.
field
===
'username'
&&
e
.
validator
===
'remote'
)
{
document
.
getElementById
(
'progressBar'
)
.
style
.
opacity
=
'0'
;
}
}
)
;