| Name | HTML attribute | Type | Description |
|---|---|---|---|
message
|
data-fv-promise___message
|
String
|
The error message |
promise
*
|
data-fv-promise___promise
|
String
or
Function
|
The callback returns promise instance |
promise
option must be a function or the name of function which returns a
Promise
as following:
promise
:
function
(
input
)
{
// input.value is the value of field
// input.element is the field element
return
new
Promise
(
function
(
resolve
,
reject
)
{
// Do something ...
// Resolve when particular task is done
resolve
(
{
valid
:
true
,
// or false, // Required
message
:
'Other message'
,
// Optional
// You can attach more data to reuse later
meta
:
{
key
:
value
}
,
}
)
;
// You can reject if there is error
reject
(
{
valid
:
false
,
// Required
message
:
'Other message'
,
// Optional
// You can attach more data to reuse later
meta
:
{
key
:
value
}
,
}
)
;
}
)
;
}
Promise
as seen in the following snippet:
promise
:
function
(
input
)
{
return
new
Promise
(
function
(
resolve
,
reject
)
{
const
files
=
input
.
element
.
files
if
(
!
files
.
length
||
typeof
FileReader
===
'undefined'
)
{
resolve
(
{
valid
:
true
,
}
)
;
}
const
img
=
new
Image
(
)
;
img
.
addEventListener
(
'load'
,
function
(
)
{
const
w
=
this
.
width
;
const
h
=
this
.
height
;
resolve
(
{
valid
:
(
w
<=
300
&&
h
<=
300
)
,
message
:
'The avatar width and height must be less than 300 px'
,
meta
:
{
// We will use it later to show the preview
source
:
img
.
src
,
width
:
w
,
height
:
h
,
}
,
}
)
;
}
)
;
img
.
addEventListener
(
'error'
,
function
(
)
{
reject
(
{
valid
:
false
,
message
:
'Please choose an image'
,
}
)
;
}
)
;
const
reader
=
new
FileReader
(
)
;
reader
.
readAsDataURL
(
files
[
0
]
)
;
reader
.
addEventListener
(
'loadend'
,
function
(
e
)
{
img
.
src
=
e
.
target
.
result
;
}
)
;
}
)
;
}
meta
:
formValidationInstance
.
on
(
'core.validator.validated'
,
function
(
e
)
{
if
(
e
.
field
===
'avatar'
&&
e
.
validator
===
'promise'
)
{
if
(
e
.
result
.
valid
&&
e
.
result
.
meta
&&
e
.
result
.
meta
.
source
)
{
// Get the source of selected image
const
source
=
e
.
result
.
meta
.
source
;
// Display the avatar in the preview area
...
}
else
if
(
!
e
.
result
.
valid
)
{
// Remove the preview
...
}
}
}
)
;