FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
...
}
,
}
)
.
on
(
'core.form.valid'
,
function
(
)
{
// Send the form data to back-end
// You need to grab the form data and create an Ajax request to send them
FormValidation
.
utils
.
fetch
(
'/path/to/your/back-end/'
,
{
method
:
'POST'
,
params
:
{
fieldName
:
fieldValue
,
otherFieldName
:
otherFieldValue
,
...
}
,
}
)
.
then
(
function
(
response
)
{
// Depending on the response from server, you can display a notification
// to let user know if the form is sent successfully
...
}
)
;
}
)
;
FormValidation.utils.fetch(url, options)
to send data to given
url
. It's up to you to choose your favourite library for doing the same thing, such as
:
<
script
src
=
"
https://unpkg.com/axios/dist/axios.min.js
"
>
script
>
...
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
...
}
)
.
on
(
'core.form.valid'
,
function
(
)
{
axios
(
{
method
:
'post'
,
url
:
'/path/to/your/back-end/'
,
data
:
{
fieldName
:
fieldValue
,
otherFieldName
:
otherFieldValue
,
...
}
,
}
)
.
then
(
function
(
response
)
{
...
}
)
;
}
)
;
}
)
;
script
>
<
form
id
=
"
demoForm
"
method
=
"
POST
"
>
<
input
type
=
"
file
"
name
=
"
avatar
"
/>
...
form
>
<
script
src
=
"
https://unpkg.com/axios/dist/axios.min.js
"
>
script
>
...
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
...
}
)
.
on
(
'core.form.valid'
,
function
(
)
{
var
formData
=
new
FormData
(
)
;
// Append the text fields
formData
.
append
(
'firstName'
,
demoForm
.
querySelector
(
'[name="firstName"]'
)
.
value
)
;
formData
.
append
(
'lastName'
,
demoForm
.
querySelector
(
'[name="lastName"]'
)
.
value
)
;
formData
.
append
(
'username'
,
demoForm
.
querySelector
(
'[name="username"]'
)
.
value
)
;
formData
.
append
(
'email'
,
demoForm
.
querySelector
(
'[name="email"]'
)
.
value
)
;
// Append the file
var
avatarFiles
=
demoForm
.
querySelector
(
'[name="avatar"]'
)
.
files
;
if
(
avatarFiles
.
length
>
0
)
{
formData
.
append
(
'avatar'
,
avatarFiles
[
0
]
)
;
}
axios
.
post
(
'/path/to/your/back-end/'
,
formData
,
{
headers
:
{
'Content-Type'
:
'multipart/form-data'
}
}
)
.
then
(
function
(
response
)
{
...
}
)
;
}
)
;
}
)
;
script
>
<
?
php
$targetFile
=
__DIR__
.
'/uploads/'
.
basename
(
$_FILES
[
"avatar"
]
[
"name"
]
)
;
$success
=
move_uploaded_file
(
$_FILES
[
"avatar"
]
[
"tmp_name"
]
,
$targetFile
)
;
...