message
option to define the error message in case the field doesn't pass the associated validator.It's recommended to perform the validation on server side after the form passes the client side validation.
blank
to each field which need to show the custom message returned from the server. The blank validator doesn't have any option:
const
fv
=
FormValidation
.
formValidation
(
form
,
{
fields
:
{
username
:
{
validators
:
{
notEmpty
:
{
...
}
,
stringLength
:
{
...
}
,
regexp
:
{
...
}
,
blank
:
{
}
,
}
}
,
email
:
{
validators
:
{
notEmpty
:
{
...
}
,
emailAddress
:
{
...
}
,
blank
:
{
}
,
}
}
,
password
:
{
validators
:
{
notEmpty
:
{
...
}
,
blank
:
{
}
,
}
}
,
}
}
)
;
true
, the field is supposed to pass it whenever the validation is performed in the client side.
const
fv
=
FormValidation
.
formValidation
(
form
,
{
fields
:
{
...
}
}
)
.
on
(
'core.form.valid'
,
function
(
)
{
// Send data to back-end
FormValidation
.
utils
.
fetch
(
'/path/to/your/back-end/'
,
{
params
:
{
username
:
form
.
querySelector
(
'[name="username"]'
)
.
value
,
email
:
form
.
querySelector
(
'[name="email"]'
)
.
value
,
password
:
form
.
querySelector
(
'[name="password"]'
)
.
value
,
}
}
)
.
then
(
(
response
)
=>
{
// We will display the messages from server if they're available
}
)
;
}
)
;
FormValidation.utils.fetch
, to send the data to given back-end. Anyway, you can use whatever method you're familiar with such as Github's
implementation
response
handler of the Ajax request. We will see how to do that in the next step.
// A sample response if all fields are valid
{
"result"
:
"ok"
}
// A sample response if there is an invalid field.
// It also tell which and the reason why the field is not valid
{
"result"
:
"error"
,
"fields"
:
{
"username"
:
"The username is not available"
,
"password"
:
"You need to have more secure password"
...
}
}
blank
validator:
const
fv
=
FormValidation
.
formValidation
(
...
)
.
on
(
'core.form.valid'
,
function
(
)
{
// Send data to back-end
FormValidation
.
utils
.
fetch
(
'/path/to/your/back-end/'
,
{
params
:
{
username
:
form
.
querySelector
(
'[name="username"]'
)
.
value
,
email
:
form
.
querySelector
(
'[name="email"]'
)
.
value
,
password
:
form
.
querySelector
(
'[name="password"]'
)
.
value
,
}
}
)
.
then
(
(
response
)
=>
{
if
(
response
.
result
===
'error'
)
{
for
(
const
field
in
response
.
fields
)
{
fv
// Update the message option
.
updateValidatorOption
(
field
,
'blank'
,
'message'
,
response
.
fields
[
field
]
)
// Set the field as invalid
.
updateFieldStatus
(
field
,
'Invalid'
,
'blank'
)
;
}
}
else
{
// Do whatever you want here
// such as showing a modal ...
}
}
)
;
}
)
;