| Name | HTML attribute | Type | Description |
|---|---|---|---|
crossDomain
|
data-fv-remote___cross-domain
|
Boolean
|
Set it to
true
if you want to have a cross domain request. By default, it's set to
false
|
data
|
data-fv-remote___data
|
Object
or
Function
|
The data sent to remote URL |
data
option if there is only field, defined as field name, sent to the remote URL. If you want to use dynamic data, then use a callback as following:
data
:
function
(
)
{
// Return an object
return
{
key
:
value
,
otherKey
:
otherValue
,
}
;
}
data-fv-remote___data
attribute, its value must be an encoded JSON string.
| Name | HTML attribute | Type | Description |
|---|---|---|---|
headers
|
data-fv-remote___headers
|
Object
|
Additonal headers that will be sent with the request |
message
|
data-fv-remote___message
|
String
|
The error message |
name
|
data-fv-remote___name
|
String
|
The name of field which need to validate |
method
|
data-fv-remote___method
|
String
|
The method used to send data to back-end. It can be
GET
(the default value) or
POST
|
url
*
|
data-fv-remote___url
|
String
or
Function
|
The remote URL |
url
:
function
(
)
{
...
return
'the URL'
;
}
| Name | HTML attribute | Type | Description |
|---|---|---|---|
validKey
|
data-fv-remote___valid-key
|
String
|
The valid key. It's
valid
by default. This option is useful when connecting to external remote server or APIs provided by 3rd parties
|
crossDomain
and
validKey
options are mostly used when you need to connect to external API endpoint.
valid
key (the key name can be changed by the
validKey
option):
{
"valid"
:
true
}
// or
{
"valid"
:
false
}
// You might need to change the importing path
import
remote
from
'formvalidation/dist/es6/validators/remote'
;
const
result
=
remote
(
)
.
validate
(
{
value
:
...
,
options
:
{
crossDomain
:
...
,
data
:
...
,
headers
:
...
,
message
:
...
,
name
:
...
,
method
:
...
,
url
:
...
,
validKey
:
...
,
}
,
}
)
;
/*
result is a Promise object which can be resolved by an object of
{
valid: true or false,
message: The error message,
meta: The additional data returned by server
}
or can be rejected by an object of
{
valid: false,
}
*/
<
form
id
=
"
registrationForm
"
>
<
div
class
=
"
cf mb2
"
>
<
div
class
=
"
fl w-100
"
>
<
div
class
=
"
fl w-25 pa2
"
>
Username
div
>
<
div
class
=
"
fl w-50
"
>
<
input
type
=
"
text
"
name
=
"
username
"
class
=
"
input-reset ba b--black-20 pa2 mb2 db w-100
"
/>
div
>
div
>
div
>
form
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'registrationForm'
)
,
{
fields
:
{
username
:
{
message
:
'The username is not valid'
,
validators
:
{
// The validator will create an Ajax request
// sending { username: 'its value' } to the back-end
remote
:
{
message
:
'The username is not available'
,
method
:
'POST'
,
url
:
'/path/to/backend/'
,
}
,
}
,
}
,
}
,
plugins
:
{
trigger
:
new
FormValidation
.
plugins
.
Trigger
(
)
,
tachyons
:
new
FormValidation
.
plugins
.
Tachyons
(
)
,
submitButton
:
new
FormValidation
.
plugins
.
SubmitButton
(
)
,
icon
:
new
FormValidation
.
plugins
.
Icon
(
{
valid
:
'fa fa-check'
,
invalid
:
'fa fa-times'
,
validating
:
'fa fa-refresh'
,
}
)
,
}
,
}
)
;
}
)
;
script
>
{"valid": "true"}
or
{"valid": "false"}
. The code bellow demonstrates a simple back-end written in PHP:
<
?
php
// Get the username from request
$username
=
$_POST
[
'username'
]
;
// Check its existence (for example, execute a query from the database) ...
$isAvailable
=
true
;
// or false
// Finally, return a JSON
echo
json_encode
(
array
(
'valid'
=>
$isAvailable
,
)
)
;
type
to determine which field is going to be validated.
<
form
id
=
"
signupForm
"
>
<
div
class
=
"
cf mb2
"
>
<
div
class
=
"
fl w-100
"
>
<
div
class
=
"
fl w-25 pa2
"
>
Username
div
>
<
div
class
=
"
fl w-50
"
>
<
input
type
=
"
text
"
name
=
"
username
"
class
=
"
input-reset ba b--black-20 pa2 mb2 db w-100
"
/>
div
>
div
>
div
>
<
div
class
=
"
cf mb2
"
>
<
div
class
=
"
fl w-100
"
>
<
div
class
=
"
fl w-25 pa2
"
>
Email
div
>
<
div
class
=
"
fl w-50
"
>
<
input
type
=
"
text
"
name
=
"
email
"
class
=
"
input-reset ba b--black-20 pa2 mb2 db w-100
"
/>
div
>
div
>
div
>
form
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'signupForm'
)
,
{
fields
:
{
username
:
{
message
:
'The username is not valid'
,
validators
:
{
// Send { username: 'its value', type: 'username' } to the back-end
remote
:
{
data
:
{
type
:
'username'
,
}
,
message
:
'The username is not available'
,
method
:
'POST'
,
url
:
'/path/to/backend/'
,
}
,
}
,
}
,
email
:
{
message
:
'The email address is not valid'
,
validators
:
{
// Send { email: 'its value', type: 'email' } to the back-end
remote
:
{
data
:
{
type
:
'email'
,
}
,
message
:
'The email is not available'
,
method
:
'POST'
,
url
:
'/path/to/backend/'
,
}
,
}
,
}
,
}
,
plugins
:
{
trigger
:
new
FormValidation
.
plugins
.
Trigger
(
)
,
tachyons
:
new
FormValidation
.
plugins
.
Tachyons
(
)
,
submitButton
:
new
FormValidation
.
plugins
.
SubmitButton
(
)
,
icon
:
new
FormValidation
.
plugins
.
Icon
(
{
valid
:
'fa fa-check'
,
invalid
:
'fa fa-times'
,
validating
:
'fa fa-refresh'
,
}
)
,
}
,
}
)
;
}
)
;
script
>
<
?
php
// Determine which field you want to check its existence
$isAvailable
=
true
;
switch
(
$_POST
[
'type'
]
)
{
case
'email'
:
$email
=
$_POST
[
'email'
]
;
// Check the email existence ...
$isAvailable
=
true
;
// or false
break
;
case
'username'
:
default
:
$username
=
$_POST
[
'username'
]
;
// Check the username existence ...
$isAvailable
=
true
;
// or false
break
;
}
// Finally, return a JSON
echo
json_encode
(
array
(
'valid'
=>
$isAvailable
,
)
)
;
<
form
id
=
"
regForm
"
>
<
div
class
=
"
cf mb2
"
>
<
div
class
=
"
fl w-100
"
>
<
div
class
=
"
fl w-25 pa2
"
>
Username
div
>
<
div
class
=
"
fl w-50
"
>
<
input
type
=
"
text
"
name
=
"
username
"
class
=
"
input-reset ba b--black-20 pa2 mb2 db w-100
"
/>
div
>
div
>
div
>
<
div
class
=
"
cf mb2
"
>
<
div
class
=
"
fl w-100
"
>
<
div
class
=
"
fl w-25 pa2
"
>
Email
div
>
<
div
class
=
"
fl w-50
"
>
<
input
type
=
"
text
"
name
=
"
email
"
class
=
"
input-reset ba b--black-20 pa2 mb2 db w-100
"
/>
div
>
div
>
div
>
<
div
class
=
"
cf mb2
"
>
<
div
class
=
"
fl w-100
"
>
<
div
class
=
"
fl w-25 pa2
"
>
Password
div
>
<
div
class
=
"
fl w-50
"
>
<
input
type
=
"
password
"
name
=
"
password
"
class
=
"
input-reset ba b--black-20 pa2 mb2 db w-100
"
/>
div
>
div
>
div
>
form
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
const
form
=
document
.
getElementById
(
'regForm'
)
;
FormValidation
.
formValidation
(
form
,
{
fields
:
{
username
:
{
message
:
'The username is not valid'
,
validators
:
{
remote
:
{
url
:
'/path/to/backend/'
,
// Send { username: 'its value', email: 'its value' } to the back-end
data
:
function
(
)
{
return
{
email
:
form
.
querySelector
(
'[name="email"]'
)
.
value
,
}
;
}
,
message
:
'The username is not available'
,
type
:
'POST'
,
}
,
}
,
}
,
email
:
{
validators
:
{
remote
:
{
url
:
'/path/to/backend/'
,
// Send { email: 'its value', username: 'its value' } to the back-end
data
:
function
(
)
{
return
{
email
:
form
.
querySelector
(
'[name="username"]'
)
.
value
,
}
;
}
,
message
:
'The email is not available'
,
type
:
'POST'
,
}
,
}
,
}
,
}
,
plugins
:
{
trigger
:
new
FormValidation
.
plugins
.
Trigger
(
)
,
tachyons
:
new
FormValidation
.
plugins
.
Tachyons
(
)
,
submitButton
:
new
FormValidation
.
plugins
.
SubmitButton
(
)
,
icon
:
new
FormValidation
.
plugins
.
Icon
(
{
valid
:
'fa fa-check'
,
invalid
:
'fa fa-times'
,
validating
:
'fa fa-refresh'
,
}
)
,
}
,
}
)
;
}
)
;
script
>
name
option by using the
data-fv-remote___name
attribute. Here are two cases which you might need to use this attribute.
data-fv-remote___name
attribute and the back-end will get the same data key.
<
form
id
=
"
signForm
"
class
=
"
form-horizontal
"
>
<
div
class
=
"
cf mb2
"
>
<
div
class
=
"
fl w-100
"
>
<
div
class
=
"
fl w-25 pa2
"
>
Email
div
>
<
div
class
=
"
fl w-50
"
>
<
input
type
=
"
text
"
name
=
"
login
"
data-fv-remote___name
=
"
email
"
class
=
"
input-reset ba b--black-20 pa2 mb2 db w-100
"
/>
div
>
div
>
div
>
form
>
<
form
id
=
"
profileForm
"
class
=
"
form-horizontal
"
>
<
div
class
=
"
form-group
"
>
<
label
class
=
"
col-lg-3 control-label
"
>
Email
label
>
<
div
class
=
"
col-lg-5
"
>
<
input
type
=
"
text
"
class
=
"
form-control
"
name
=
"
email
"
data-fv-remote___name
=
"
email
"
/>
div
>
div
>
form
>
data-fv-remote___name
attribute for these email address fields.
<
form
id
=
"
demoForm
"
class
=
"
form-horizontal
"
>
<
div
class
=
"
cf mb2
"
>
<
div
class
=
"
fl w-100
"
>
<
div
class
=
"
fl w-25 pa2
"
>
Primary email
div
>
<
div
class
=
"
fl w-50
"
>
<
input
type
=
"
text
"
name
=
"
primary_email
"
data-fv-remote___name
=
"
email
"
class
=
"
input-reset ba b--black-20 pa2 mb2 db w-100
"
/>
div
>
div
>
div
>
<
div
class
=
"
cf mb2
"
>
<
div
class
=
"
fl w-100
"
>
<
div
class
=
"
fl w-25 pa2
"
>
Secondary email
div
>
<
div
class
=
"
fl w-50
"
>
<
input
type
=
"
text
"
name
=
"
secondary_email
"
data-fv-remote___name
=
"
email
"
class
=
"
input-reset ba b--black-20 pa2 mb2 db w-100
"
/>
div
>
div
>
div
>
form
>
FormValidation.utils.fetch()
method don't send the correct data for POST request