required
attribute for all of them.
<
form
id
=
"
demoForm
"
method
=
"
POST
"
>
<
input
type
=
"
text
"
class
=
"
js-email-address
"
name
=
"
primaryEmail
"
placeholder
=
"
Primary email
"
/>
<
input
type
=
"
text
"
class
=
"
js-email-address
"
name
=
"
secondaryEmail
"
placeholder
=
"
Secondary email
"
/>
...
form
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
const
fv
=
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
email
:
{
// All the email address field have js-email-address class
selector
:
'.js-email-address'
,
validators
:
{
...
}
,
}
,
}
,
plugins
:
{
...
}
,
}
)
;
}
)
;
script
>
js-
,
js-email-address
for example, is a good practice. It lets other developer in your team know that the field will be interactived by JavaScript. So it shouldn't be removed when other designers refactor the markup or CSS classes.
updateFieldStatus()
method.
const
fv
=
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
email
:
{
// All the email address field have js-email-address class
selector
:
'.js-email-address'
,
validators
:
{
callback
:
{
message
:
'You must enter at least one email address'
,
callback
:
function
(
input
)
{
let
isEmpty
=
true
;
const
emailElements
=
fv
.
getElements
(
'email'
)
;
for
(
const
i
in
emailElements
)
{
if
(
emailElements
[
i
]
.
value
!==
''
)
{
isEmpty
=
false
;
break
;
}
}
if
(
!
isEmpty
)
{
// Update the status of callback validator for all fields
fv
.
updateFieldStatus
(
'email'
,
'Valid'
,
'callback'
)
;
return
true
;
}
return
false
;
}
}
,
emailAddress
:
{
message
:
'The value is not a valid email address'
}
,
}
,
}
}
,
plugins
:
{
...
}
,
}
)
;
getElements()
method to get all the email elements.